/* ============================================
   tokens.css - Design Tokens
   CUADRA Design System v1.0
   Dark-first, architectural, editorial
   ============================================ */

:root {
  /* ---- Core palette (Design System section 3 & 24) ---- */
  --color-black: #0F1111;
  --color-graphite: #292E2D;
  --color-sage: #AFC8C2;
  --color-mist: #D8E2DF;
  --color-white: #F2F1ED;
  --color-concrete: #A7AAAD;

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* ---- Radii (rectilinear/architectural, section 9) ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* ---- Spacing (4/8 scale, section 8) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Layout ---- */
  --container: 1440px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 180ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;

  /* ============================================
     Semantic tokens (derived from the DS palette)
     Default context = DARK theme (primary).
     Sections that flip to a light context override
     these via .section--[light/mist] below.
     ============================================ */

  /* Surfaces (dark-first) */
  --color-bg: var(--color-black);
  --color-bg-raised: var(--color-graphite);
  --color-bg-card: #171A1A;         /* subtle lift over black, within palette *family* */
  --color-bg-card-hover: #1D2121;

  /* Text (dark context) */
  --color-text: var(--color-white);
  --color-text-secondary: var(--color-concrete); /* concrete on black = 7.7:1, passes AA */
  --color-text-muted: var(--color-concrete);

  /* Brand / accent */
  --color-primary: var(--color-sage);
  --color-primary-hover: #C2D7D1;   /* lightened sage for hover, within sage family */
  --color-accent: var(--color-sage);
  --color-accent-on-primary: var(--color-black);
  --color-accent-subtle: rgba(175, 200, 194, 0.12);
  /* Accent used as INK (text / icons / lines). Sage only passes AA on dark
     surfaces; on light surfaces we swap to a darkened sage (#3E6B62, ~5.6:1
     on white) so accent text/icons stay readable. Button backgrounds keep
     --color-primary (light sage + black text) everywhere. */
  --color-accent-ink: var(--color-sage);
  --color-accent-ink-hover: #C2D7D1;

  /* Borders */
  --color-border: rgba(242, 241, 237, 0.12);      /* DS: 1px rgba(242,241,237,0.12) on dark */
  --color-border-strong: rgba(242, 241, 237, 0.28);

  /* Feedback */
  --color-success: #AFC8C2;
  --color-error: #E58E7E;            /* lightened warm red for AA on dark (see note) */
  --color-focus: var(--color-sage);
  --color-overlay: rgba(15, 17, 17, 0.94);

  /* Semantic "before"/neutral marker (case-study & comparison "Antes" state).
     Palette-derived, no red: communicates the "before/error" state with a
     dark concrete mark + ✕ glyph, not a WCAG-failing or off-palette warm red.
     Concrete #A7AAAD passes AA as text on dark (8.1:1); on light contexts we
     swap to a darker concrete (#5A6060, ~5.9:1 on white) so the ✕ reads. */
  --color-before: var(--color-concrete);
  --color-before-strong: var(--color-concrete);

  /* ---- Typography scale (section 6) ---- */
  --text-display-xl: 700 clamp(2.75rem, 6vw, 4.5rem)/1.0 var(--font-display);
  --text-display-lg: 700 clamp(2rem, 4.5vw, 3.5rem)/1.05 var(--font-display);
  --text-display-md: 600 clamp(1.75rem, 3vw, 2.25rem)/1.12 var(--font-display);
  --text-h2: 600 1.5rem/1.2 var(--font-display);
  --text-h3: 500 1.125rem/1.35 var(--font-display);
  --text-body-lg: 400 1.125rem/1.5 var(--font-body);
  --text-body: 400 1rem/1.6 var(--font-body);
  --text-body-sm: 400 0.875rem/1.5 var(--font-body);
  --text-label: 500 0.6875rem/1.4 var(--font-body);
  --text-caption: 400 0.75rem/1.5 var(--font-body);
  --text-stat: 700 clamp(2.5rem, 5vw, 3.5rem)/1.0 var(--font-display);

  --letter-spacing-tight: -0.04em;
  --letter-spacing-snug: -0.03em;
  --letter-spacing-normal: -0.01em;
  --letter-spacing-wide: 0.08em;

  /* ---- Spacing aliases used by layout ---- */
  --space-0: 0;
  --space-section: var(--space-9);      /* 96px */
  --space-section-lg: var(--space-10);  /* 128px */
  --space-gutter: clamp(1rem, 4vw, 2rem);
  --space-page: clamp(1rem, 4vw, 3rem);

  /* ---- Shadows (restrained, no glow) ---- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);

  /* ---- Transitions (section 14) ---- */
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-normal: var(--duration-normal) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);

  /* ---- Z-index scale ---- */
  --z-nav: 100;
  --z-overlay: 200;
}

/* ============================================
   Light-context sections (stats, comparison, process,
   testimonials, pricing, FAQ) override semantic tokens
   so text/borders flip correctly on white/mist.
   The .section--light classes are applied on those
   <section> blocks in the HTML.
   ============================================ */
.section--light {
  --color-text: var(--color-black);
  --color-text-secondary: var(--color-graphite);   /* graphite on white = ~10.9:1, AA */
  --color-text-muted: #5A6060;                      /* derived darker gray for AA on white (note 2) */
  --color-border: rgba(15, 17, 17, 0.12);           /* DS: rgba(15,17,17,0.12) on light */
  --color-border-strong: rgba(15, 17, 17, 0.24);
  --color-bg: var(--color-white);
  --color-bg-raised: var(--color-mist);
  --color-bg-card: #FFFFFF;
  --color-bg-card-hover: #FBFBF9;
  --color-accent-subtle: rgba(15, 17, 17, 0.05);
  --color-primary: var(--color-sage);
  --color-primary-hover: #9CB9B1;
  --color-accent-ink: #3E6B62;      /* darkened sage for AA on white (derived, documented below) */
  --color-accent-ink-hover: #356058;
  --color-error: #B3543F;                            /* darker red for AA text on white (note 3) */
  --color-focus: #3E6B62;                            /* focus ring visible on white */
  --color-before: #5A6060;                           /* darker concrete for AA "Antes" mark on white (~5.9:1) */
  --color-before-strong: #454A4A;                    /* darker concrete for ✕ glyph on white (AA text, ~8:1) */
  background-color: var(--color-white);
}

/* Dark graphite band (alternate to pure black; DS: graphite = depth surfaces) */
.section--dark {
  background-color: var(--color-graphite);
}

/* Mist-context sections (alternate light band, section 3 "Mist" usage) */
.section--mist {
  --color-text: var(--color-black);
  --color-text-secondary: var(--color-graphite);
  --color-text-muted: #5A6060;
  --color-border: rgba(15, 17, 17, 0.12);
  --color-border-strong: rgba(15, 17, 17, 0.24);
  --color-bg: var(--color-mist);
  --color-bg-raised: var(--color-white);
  --color-bg-card: #FFFFFF;
  --color-bg-card-hover: #FBFBF9;
  --color-accent-subtle: rgba(15, 17, 17, 0.05);
  --color-primary: #3E6B62;                          /* darkened sage for accent on light (see note 4) */
  --color-primary-hover: #356058;
  --color-accent-ink: #3E6B62;
  --color-accent-ink-hover: #356058;
  --color-error: #B3543F;
  --color-focus: #3E6B62;
  --color-before: #5A6060;                           /* darker concrete for AA "Antes" mark on mist (~5.9:1) */
  --color-before-strong: #454A4A;                    /* ✕ glyph on mist (AA text) */
  background-color: var(--color-mist);
}

/*
   NOTES (documented deviations from the strict palette):
   1. --color-bg-card (#171A1A / #1D2121) and hover are subtle graphite-family
      lifts on the dark theme, chosen so dark cards read against plain black
      without a glow/shadow. They stay firmly inside the near-black family.
   2. --color-text-muted on light contexts (#5A6060) is a derived neutral gray
      that reaches WCAG AA (~5.9:1) on #F2F1ED; concrete (#A7AAAD) on white is
      only ~2.1:1 and would fail, so muted text on light surfaces uses this
      darker derived gray instead. On dark surfaces concrete (#A7AAAD) passes
      at ~8.1:1 and is kept as-is per the Design System.
   3. --color-error on light contexts uses #B3543F (a darker warm red) so the
      form error labels / X marks in light comparison sections reach AA on white.
      NOTE: case-study "Antes" comparison does NOT use error red anymore; it uses
      the palette-derived --color-before tokens + ✕ glyph (Vega directive, DS rule
      of gold "nothing placed just to look pretty").
   4. --color-primary on --section--mist uses a darkened sage (#3E6B62) so that
      sage accents (checkmarks, numbers, links) reach AA as text on light mist.
      Plain sage (#AFC8C2) as text on white/mist fails contrast (~1.6:1), so it
      is only used as a solid accent with black text on top per the DS.
   5. WCAG AA contrast verification of the core palette (required, DoD D):
      - concrete #A7AAAD on black #0F1111  → 8.1:1  (text-secondary on dark: PASS)
      - black #0F1111  on sage #AFC8C2     → 10.7:1 (primary button text: PASS)
      - black #0F1111  on concrete #A7AAAD → 8.1:1  (button text on concrete: PASS)
      - black #0F1111  on white #F2F1ED    → 17.1:1 (body text on light: PASS)
      - graphite #292E2D on white #F2F1ED  → 12.6:1 (text-secondary on light: PASS)
      - sage #AFC8C2    on white #F2F1ED   → 1.57:1 (FAILS → sage is NEVER used as
        text on light surfaces, only as a button/solid background with black text,
        per the DS. Handled via --color-accent-ink swap in light contexts.)
      - sage #AFC8C2    on graphite #292E2D→ 7.7:1  (avatar mark u= in light ctx: PASS)
      - #5A6060 (dark concrete) on white #F2F1ED → 5.9:1 (before-mark/✕ on light: PASS)
   6. Hover states (DS section 13/14, 180-250ms, --ease-out):
      - .btn--primary:hover keeps --color-accent-on-primary (#0F1111) text on the
        hover sage background (#C2D7D1): ~12.7:1 PASS.
      - Card/project demo-link hovers use --color-accent-ink-hover; in dark cards
        (#171A1A) #C2D7D1 reads ~12:1 PASS.
*/