/* S.O.T. — Design Tokens (guides public profile)
 * VERBATIM copy of sot-merchant-rental/assets/css/rental-tokens.css. Shared
 * design system across verticals — do NOT diverge here. */

:root {
  /* --- Core palette: editorial, trustworthy, tropical --- */
  --ink:           #0F1F24;   /* deep cove — text, logo */
  --ink-2:         #2B3D44;
  --ink-3:         #546870;
  --ink-4:         #8B9CA3;
  --paper:         #FBF8F2;   /* warm off-white — page bg */
  --paper-2:       #F3EFE6;
  --paper-3:       #E7E0D2;
  --line:          #DDD3BE;

  /* --- Brand accents — two-color system ---
     Ocean (blue economy: sea, waterfalls, reef)
     Rainforest (green economy: forest, crocodile, mountain) */
  --ocean:         #0A4D6E;   /* primary ocean blue */
  --ocean-deep:    #063349;
  --ocean-soft:   #D3E3EC;
  --forest:        #1F5A36;   /* rainforest green */
  --forest-deep:   #133A22;
  --forest-soft:  #DCE8DE;

  /* --- Marketing accents — flyers/social only, never product UI --- */
  --accent-sunset: #D86B3C;
  --accent-coral:  #C84B4B;
  --accent-sand:   #E5C68A;
  --accent-sky:    #7CC4D8;

  /* Aliases kept so existing component code still resolves */
  --tide:          var(--ocean);
  --tide-deep:     var(--ocean-deep);
  --tide-soft:     var(--ocean-soft);
  --coral:         var(--forest);
  --coral-soft:    var(--forest-soft);
  --coffee:        var(--ink);
  --sand:          var(--paper-3);
  --leaf:          var(--forest);

  /* Functional */
  --success:       var(--forest);
  --warn:          #B86A1A;
  --error:         #A8311F;

  /* Type — S.O.T. wordmark locked to Glamore */
  --glamore: "Glamore", "DM Serif Display", "Cormorant Garamond", Georgia, serif;
  --serif:   "Fraunces", "DM Serif Display", "Cormorant Garamond", Georgia, serif;
  --sans:    "Inter Tight", "Söhne", "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Radii + shadow */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --shadow-card:  0 1px 2px rgba(15,31,36,.04), 0 8px 24px -12px rgba(15,31,36,.12);
  --shadow-float: 0 24px 48px -16px rgba(15,31,36,.22);
}