/* ============================================================
   REETAIN — Design Tokens
   Source: Branding V1.2.pdf + Reetain Template V0.pptx theme
   Brand DNA: luxury × premium retail × technological innovation.
   "Empowering Journeys."
   ============================================================ */

/* -- Webfonts -----------------------------------------------
   Primary headline: Outfit (local TTFs in /fonts — full weight range)
   Body:             Inter Tight (local TTFs in /fonts — full weight range)
   System fallback:  Montserrat (Google Fonts)
   ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR — Primary palette
     ============================================================ */
  --rt-black:           #001D21;   /* "Reetain Black" — the anchor color */
  --rt-midnight-green:  #002B30;   /* slightly lifted dark for layering */
  --rt-white:           #FAFAFA;   /* "Reetain White" — warm off-white */
  --rt-pure-white:      #FFFFFF;
  --rt-isabelline:      #F1ECE5;   /* soft cream — primary light surface */

  /* Primary accent — Majorelle Blue (note: PDF lists hex as #5F57FE; theme XML uses #5E58F0). */
  --rt-majorelle:       #5F57FE;
  --rt-majorelle-deep:  #3A24F5;   /* deeper electric blue from theme */

  /* ============================================================
     COLOR — Secondary palette
     ============================================================ */
  --rt-coral:           #FA8569;   /* "Bittersweet/Coral" — primary warm accent */
  --rt-coral-soft:      #FCB6A5;   /* "Melon" — softer coral */
  --rt-mint:            #00B295;   /* fresh balancing green */
  --rt-mint-soft:       #40AF79;   /* warmer mint from theme */
  --rt-ecru:            #C2AF79;   /* warm gold/sand — luxury signal */
  --rt-murrey:          #8F2C56;   /* deep burgundy/wine */
  --rt-mauve:           #B7558F;   /* muted plum */
  --rt-lavender:        #BFBCFF;   /* AI-context light */
  --rt-warm-gray:       #B0A796;   /* desaturated stone */

  /* ============================================================
     COLOR — Neutrals / shade scales (selected stops)
     Black ramp
     ============================================================ */
  --rt-ink-1000: #00181B;
  --rt-ink-900:  #001417;
  --rt-ink-800:  #001D21;   /* = brand black */
  --rt-ink-700:  #00505B;
  --rt-ink-600:  #008596;
  --rt-ink-500:  #0FE3FF;
  --rt-ink-400:  #4BEAFF;
  --rt-ink-300:  #87F1FF;
  --rt-ink-200:  #C3F8FF;

  /* Majorelle ramp */
  --rt-blue-900: #0D01F4;
  --rt-blue-700: #2B20FE;
  --rt-blue-600: #5148FE;   /* canonical accessible blue */
  --rt-blue-500: #5F57FE;   /* brand Majorelle */
  --rt-blue-400: #7D76FE;
  --rt-blue-300: #A8A4FF;
  --rt-blue-200: #BEBAFF;
  --rt-blue-100: #D4D1FF;
  --rt-blue-50:  #E9E8FF;

  /* Coral ramp */
  --rt-coral-700: #F84214;
  --rt-coral-600: #F9643F;
  --rt-coral-500: #FA8569;   /* brand coral */
  --rt-coral-400: #FB967D;
  --rt-coral-300: #FCA590;
  --rt-coral-200: #FCB4A2;
  --rt-coral-100: #FDC3B5;
  --rt-coral-50:  #FEE1DA;

  /* Ecru / luxury sand ramp */
  --rt-ecru-700: #A28B4B;
  --rt-ecru-600: #B69E5F;
  --rt-ecru-500: #C2AF79;   /* brand ecru */
  --rt-ecru-400: #CAB98B;
  --rt-ecru-300: #D9CDAC;
  --rt-ecru-200: #E0D7BD;
  --rt-ecru-100: #E8E1CD;
  --rt-ecru-50:  #F0EBDE;

  /* Mint ramp */
  --rt-mint-700: #008670;
  --rt-mint-600: #009C82;
  --rt-mint-500: #00B295;   /* brand mint */
  --rt-mint-400: #06FFD6;
  --rt-mint-200: #83FFEA;
  --rt-mint-100: #D6FFF8;

  /* Murrey ramp */
  --rt-murrey-700: #502A4B;
  --rt-murrey-600: #6B3864;   /* contrast-safe pair */
  --rt-murrey-500: #8F2C56;
  --rt-murrey-400: #B471AB;
  --rt-murrey-100: #F0E3EE;

  /* Cream / surface ramp */
  --rt-cream-100: #FBFAF8;
  --rt-cream-200: #F4F0EB;
  --rt-cream-300: #F1ECE5;   /* = isabelline */
  --rt-cream-400: #DCD0BE;
  --rt-cream-500: #C8B498;

  /* Cool gray ramp */
  --rt-gray-50:  #F8F9F9;
  --rt-gray-100: #F2F3F4;
  --rt-gray-200: #D1D4D7;
  --rt-gray-400: #B0B6BC;
  --rt-gray-700: #194045;

  /* ============================================================
     COLOR — Signature gradients (AI / Punchy / Light)
     ============================================================ */
  --rt-grad-punchy: linear-gradient(90deg, #5F57FE 0%, #FA8569 100%);
  --rt-grad-light:  linear-gradient(90deg, #BFBCFF 0%, #FCB6A5 100%);
  --rt-grad-night:  linear-gradient(135deg, #001D21 0%, #002B30 100%);

  /* ============================================================
     SEMANTIC — Surfaces
     Default mode: light (cream/black brand pair)
     ============================================================ */
  --bg:             var(--rt-isabelline);   /* primary brand light surface */
  --bg-elevated:    var(--rt-cream-100);
  --bg-canvas:      var(--rt-pure-white);
  --bg-sober:       var(--rt-pure-white);   /* alternate sober light */
  --bg-inverse:     var(--rt-black);

  /* Foreground / text */
  --fg-1:           var(--rt-black);        /* primary text */
  --fg-2:           var(--rt-gray-700);     /* secondary text */
  --fg-3:           var(--rt-warm-gray);    /* tertiary / metadata */
  --fg-on-dark:     var(--rt-white);
  --fg-on-accent:   var(--rt-pure-white);
  --fg-link:        var(--rt-majorelle);

  /* Borders / separators */
  --border-1:       rgba(0, 29, 33, 0.12);  /* default hairline on light */
  --border-2:       rgba(0, 29, 33, 0.06);
  --border-on-dark: rgba(255, 255, 255, 0.14);

  /* Accent semantics */
  --accent:         var(--rt-majorelle);    /* primary action */
  --accent-hover:   var(--rt-majorelle-deep);
  --accent-warm:    var(--rt-coral);        /* energy / highlight */
  --accent-luxe:    var(--rt-ecru);         /* luxury cue */
  --accent-success: var(--rt-mint);

  /* ============================================================
     TYPOGRAPHY — families
     ============================================================ */
  --font-display: 'Outfit', 'Helvetica Neue', system-ui, sans-serif;
  --font-body:    'Inter Tight', 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-system:  'Montserrat', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ============================================================
     TYPE SCALE — derived from PDF specs
       H1 (Main headline):  Outfit Light  40–48pt
       H2 (Secondary):      Outfit Light  30–36pt
       H3 (Subhead):        Outfit Semibold 24–32pt
       Eyebrow / S U B:     Outfit Regular 12pt ALL CAPS, tracked
       Body:                Inter Tight  12–18pt
       Disclaimer:          Outfit Semibold 10–12pt
       Quote:               Outfit Light  16–19pt
     ============================================================ */
  --fs-display: clamp(48px, 5.4vw, 80px);   /* hero displays */
  --fs-h1:      clamp(40px, 4vw, 56px);
  --fs-h2:      clamp(30px, 2.8vw, 40px);
  --fs-h3:      clamp(22px, 2vw, 30px);
  --fs-h4:      18px;
  --fs-body:    16px;
  --fs-body-lg: 18px;
  --fs-small:   14px;
  --fs-eyebrow: 12px;
  --fs-caption: 11px;

  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* Tracking (letter-spacing) */
  --tr-tight:   -0.02em;
  --tr-normal:  0;
  --tr-eyebrow: 0.18em;   /* eyebrow caps */
  --tr-caps:    0.04em;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ============================================================
     RADIUS
     The brand favors restrained, pragmatic radii — never pill-y
     except for tags/badges.
     ============================================================ */
  --radius-0:   0;
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS / ELEVATION
     Restrained — luxury brands lean on negative space, not blur.
     ============================================================ */
  --shadow-1: 0 1px 2px rgba(0, 29, 33, 0.04), 0 1px 1px rgba(0, 29, 33, 0.04);
  --shadow-2: 0 4px 12px rgba(0, 29, 33, 0.06), 0 1px 2px rgba(0, 29, 33, 0.04);
  --shadow-3: 0 12px 32px rgba(0, 29, 33, 0.10), 0 2px 6px rgba(0, 29, 33, 0.05);
  --shadow-4: 0 24px 64px rgba(0, 29, 33, 0.16);
  --shadow-inset: inset 0 0 0 1px rgba(0, 29, 33, 0.08);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container:      1240px;
  --container-tight: 960px;
}

/* Dark mode (Reetain Black anchor) */
:root[data-theme="dark"],
.rt-dark {
  --bg:         var(--rt-black);
  --bg-elevated: var(--rt-midnight-green);
  --bg-canvas:  var(--rt-black);
  --fg-1:       var(--rt-white);
  --fg-2:       rgba(250, 250, 250, 0.72);
  --fg-3:       rgba(250, 250, 250, 0.5);
  --border-1:   rgba(255, 255, 255, 0.14);
  --border-2:   rgba(255, 255, 255, 0.08);
  --shadow-1:   0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2:   0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-3:   0 12px 32px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   BASE — semantic element styles
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0;
  letter-spacing: var(--tr-tight);
  text-wrap: balance;
}

/* Headlines per PDF: light weights for big display, semibold for subheads */
h1 { font-size: var(--fs-h1);      font-weight: 300; line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2);      font-weight: 300; line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3);      font-weight: 600; line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4);      font-weight: 600; line-height: var(--lh-snug); }
h5 { font-size: var(--fs-body-lg); font-weight: 600; }
h6 { font-size: var(--fs-body);    font-weight: 600; }

p, li {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0;
}

a {
  color: var(--fg-link);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--accent-hover); text-decoration: underline; }

small, .rt-caption { font-size: var(--fs-small); color: var(--fg-3); }

code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* ============================================================
   UTILITY CLASSES — Reetain typography roles
   ============================================================ */

/* Display — hero / cover slides */
.rt-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}

/* Eyebrow — "S U B H E A D L I N E" / caption / category */
.rt-eyebrow {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-eyebrow);
  line-height: 1.2;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Lead — large body for openers */
.rt-lead {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

/* Quote treatment per PDF (Outfit Light 16–19pt + 60–64pt mark) */
.rt-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 19px;
  line-height: 1.45;
  color: var(--fg-1);
}
.rt-quote-mark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 64px;
  line-height: 0.8;
  color: var(--accent-warm);
}

/* Disclaimer / metadata */
.rt-disclaimer {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--tr-caps);
  color: var(--fg-3);
}