/* ==========================================================================
   Closet Compass — Design Tokens
   --------------------------------------------------------------------------
   THIS IS THE ONLY FILE IN THE PROJECT THAT CONTAINS LITERAL DESIGN VALUES.
   No component stylesheet may contain a hex code, a font stack, or a raw px
   spacing value. Everything references a custom property defined here.

   Palette status: PROVISIONAL — derived by sampling public_html/logo.png
   (confirmed by the owner as the real logo, served at
   https://closetcompass.ca/logo.png). These are measured values, not guesses.
   When the full brand kit arrives, edit the values in this file only;
   no component CSS should need to change.

   Accessibility note, and the reason for the -600/-700 steps below:
   the logo's colours are light and CANNOT carry white text.
     white on #FF8B86 = 2.26:1  → fails WCAG AA
     white on #E2635E = 3.40:1  → large text / UI boundaries only
     white on #D6524D = 4.06:1  → large text / UI boundaries only
     ink   on #FF8B86 = 5.91:1  → passes AA
   So: light logo tints are for FILLS AND DECORATION; the darker steps are for
   INTERACTIVE elements. Never put white text on coral-400 or amber.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------------
     BRAND — sampled from the logo
     --------------------------------------------------------------------- */

  /* Coral — the compass ring and the "Compass" wordmark. Primary brand hue. */
  --cc-coral-50:   #FFF1F0;
  --cc-coral-100:  #FFE0DE;
  --cc-coral-200:  #FFC4C1;
  --cc-coral-300:  #FFA8A3;
  --cc-coral-400:  #FF8B86;   /* ← sampled: logo ring highlight */
  --cc-coral-500:  #F5837E;   /* ← sampled: logo ring body */
  --cc-coral-600:  #E2635E;   /* interactive: white text OK at ≥18.66px/bold */
  --cc-coral-700:  #D6524D;   /* interactive: best white-text contrast */
  --cc-coral-800:  #A93D39;
  --cc-coral-900:  #7C2C29;

  /* Purple — the hanger needle and tick marks. Secondary brand hue. */
  --cc-purple-50:  #F5F1F9;
  --cc-purple-100: #E9E1F1;
  --cc-purple-200: #D4C6E3;
  --cc-purple-300: #B999CF;   /* ← sampled: logo tick marks */
  --cc-purple-400: #A389BE;   /* ← sampled: logo hanger needle */
  --cc-purple-500: #8B6DAB;
  --cc-purple-600: #6E559A;   /* interactive: white text 6.12:1, passes AA */
  --cc-purple-700: #59447C;
  --cc-purple-800: #43335E;
  --cc-purple-900: #35294C;   /* ← sampled: the "Closet" wordmark ink */

  /* Amber — the sparkle. Accent only; never a background for text. */
  --cc-amber-100:  #FFF0D2;
  --cc-amber-300:  #FDCD7A;   /* ← sampled: logo sparkle highlight */
  --cc-amber-400:  #FFB84A;   /* ← sampled: logo sparkle core */
  --cc-amber-600:  #D9902A;
  --cc-amber-800:  #92601A;

  /* Warm neutrals — the logo's cream field. NOT pure grey; keeps the warmth. */
  --cc-cream-50:   #FEF9F3;   /* ← sampled: logo background */
  --cc-cream-100:  #FBF3EA;
  --cc-cream-200:  #F2E9DE;
  --cc-neutral-300:#DCD4CC;
  --cc-neutral-400:#B8AFA6;
  --cc-neutral-500:#8B8279;
  --cc-neutral-600:#6B635B;
  --cc-neutral-700:#4A443E;
  --cc-neutral-900:#2A2622;
  --cc-white:      #FFFFFF;

  /* Status — deliberately distinct from coral, which reads as brand, not error */
  --cc-success-100:#DFF5E6;
  --cc-success-600:#2E8B57;
  --cc-warning-100:#FFF0D2;
  --cc-warning-700:#B3760F;
  --cc-danger-100: #FCE4E4;
  --cc-danger-600: #C43D3D;
  --cc-info-100:   #E4EFFA;
  --cc-info-600:   #2F6FAF;


  /* ---------------------------------------------------------------------
     SEMANTIC ROLES
     Components reference THESE, not the raw ramps above. Re-theming means
     repointing a role, not editing every component.
     --------------------------------------------------------------------- */

  --cc-bg:              var(--cc-cream-50);
  --cc-bg-raised:       var(--cc-white);
  --cc-bg-sunken:       var(--cc-cream-100);
  --cc-bg-inset:        var(--cc-cream-200);

  --cc-text:            var(--cc-purple-900);   /* 12.75:1 on cream */
  --cc-text-muted:      var(--cc-neutral-600);
  --cc-text-subtle:     var(--cc-neutral-500);
  --cc-text-on-brand:   var(--cc-white);
  --cc-text-inverse:    var(--cc-cream-50);

  --cc-border:          var(--cc-neutral-300);
  --cc-border-strong:   var(--cc-neutral-400);
  --cc-border-brand:    var(--cc-coral-300);

  /* Primary action — coral-600, the lightest step that carries white text */
  --cc-primary:         var(--cc-coral-600);
  --cc-primary-hover:   var(--cc-coral-700);
  --cc-primary-active:  var(--cc-coral-800);
  --cc-primary-subtle:  var(--cc-coral-50);
  --cc-primary-tint:    var(--cc-coral-400);    /* decorative fills only */

  /* Secondary action */
  --cc-secondary:       var(--cc-purple-600);
  --cc-secondary-hover: var(--cc-purple-700);
  --cc-secondary-subtle:var(--cc-purple-50);
  --cc-secondary-tint:  var(--cc-purple-400);   /* decorative fills only */

  /* Accent — badges, streaks, celebratory moments. Never text background. */
  --cc-accent:          var(--cc-amber-400);
  --cc-accent-subtle:   var(--cc-amber-100);
  --cc-accent-text:     var(--cc-amber-800);    /* amber text on cream */

  --cc-focus-ring:      var(--cc-purple-600);


  /* ---------------------------------------------------------------------
     TYPOGRAPHY
     PROVISIONAL. The logo wordmark is a rounded geometric sans (Poppins /
     Nunito / Baloo family). No webfont is committed until the brand kit
     names one — there is no build step, so a font is a <link> plus a value
     change here, nothing more.
     --------------------------------------------------------------------- */

  --cc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --cc-font-display: var(--cc-font-sans);   /* ← repoint when the kit lands */
  --cc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale — 1.200 minor third, 16px base */
  --cc-text-2xs:  0.694rem;   /* 11px */
  --cc-text-xs:   0.833rem;   /* 13px */
  --cc-text-sm:   0.9375rem;  /* 15px */
  --cc-text-base: 1rem;       /* 16px — never smaller for body copy */
  --cc-text-lg:   1.2rem;     /* 19px */
  --cc-text-xl:   1.44rem;    /* 23px */
  --cc-text-2xl:  1.728rem;   /* 28px */
  --cc-text-3xl:  2.074rem;   /* 33px */
  --cc-text-4xl:  2.488rem;   /* 40px */

  --cc-weight-normal:   400;
  --cc-weight-medium:   500;
  --cc-weight-semibold: 600;
  --cc-weight-bold:     700;

  --cc-leading-tight:   1.2;
  --cc-leading-snug:    1.35;
  --cc-leading-normal:  1.55;
  --cc-leading-relaxed: 1.75;

  --cc-tracking-tight:  -0.015em;
  --cc-tracking-normal: 0;
  --cc-tracking-wide:   0.03em;


  /* ---------------------------------------------------------------------
     SPACING — 4px base
     --------------------------------------------------------------------- */

  --cc-space-0:  0;
  --cc-space-1:  0.25rem;   /*  4px */
  --cc-space-2:  0.5rem;    /*  8px */
  --cc-space-3:  0.75rem;   /* 12px */
  --cc-space-4:  1rem;      /* 16px */
  --cc-space-5:  1.5rem;    /* 24px */
  --cc-space-6:  2rem;      /* 32px */
  --cc-space-7:  3rem;      /* 48px */
  --cc-space-8:  4rem;      /* 64px */
  --cc-space-9:  6rem;      /* 96px */


  /* ---------------------------------------------------------------------
     RADII — generous, matching the logo's rounded geometry
     --------------------------------------------------------------------- */

  --cc-radius-sm:   6px;
  --cc-radius-md:   10px;
  --cc-radius-lg:   16px;
  --cc-radius-xl:   24px;
  --cc-radius-2xl:  32px;
  --cc-radius-full: 9999px;


  /* ---------------------------------------------------------------------
     ELEVATION — warm-tinted shadows; pure black reads dirty on cream
     --------------------------------------------------------------------- */

  --cc-shadow-xs: 0 1px 2px rgba(53, 41, 76, 0.06);
  --cc-shadow-sm: 0 2px 6px rgba(53, 41, 76, 0.08);
  --cc-shadow-md: 0 6px 16px rgba(53, 41, 76, 0.10);
  --cc-shadow-lg: 0 14px 32px rgba(53, 41, 76, 0.12);
  --cc-shadow-xl: 0 24px 56px rgba(53, 41, 76, 0.16);

  /* Playful press-down affordance (Duolingo-style solid bottom edge) */
  --cc-shadow-pressable:        0 4px 0 var(--cc-coral-800);
  --cc-shadow-pressable-active: 0 1px 0 var(--cc-coral-800);


  /* ---------------------------------------------------------------------
     MOTION — animate transform and opacity only (see TECH_STACK.md)
     --------------------------------------------------------------------- */

  --cc-duration-instant: 80ms;
  --cc-duration-fast:    150ms;
  --cc-duration-normal:  240ms;
  --cc-duration-slow:    360ms;

  --cc-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --cc-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --cc-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* slight overshoot */


  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */

  --cc-container-max:   1200px;
  --cc-content-max:     720px;
  --cc-nav-width:       280px;
  --cc-header-height:   64px;
  --cc-tap-target-min:  44px;   /* iOS HIG minimum; do not go below */

  --cc-z-base:     0;
  --cc-z-sticky:   100;
  --cc-z-nav:      200;
  --cc-z-overlay:  300;
  --cc-z-modal:    400;
  --cc-z-toast:    500;
}


/* --------------------------------------------------------------------------
   REDUCED MOTION
   The brief calls for animation, and animation must still be accessible.
   Durations collapse to near-zero; layout and colour are untouched.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --cc-duration-instant: 1ms;
    --cc-duration-fast:    1ms;
    --cc-duration-normal:  1ms;
    --cc-duration-slow:    1ms;
    --cc-ease-spring:      linear;
  }
}


/* --------------------------------------------------------------------------
   DARK MODE — scaffolded, not yet designed.
   Roles are repointed; component CSS is untouched. Values here are a
   starting point to be reviewed against the brand kit, not a finished theme.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"],
  :root:not([data-theme]) {
    --cc-bg:            #1C1826;
    --cc-bg-raised:     #262032;
    --cc-bg-sunken:     #15121D;
    --cc-bg-inset:      #2F2840;

    --cc-text:          #F2ECE6;
    --cc-text-muted:    #B5ADA4;
    --cc-text-subtle:   #8B8279;

    --cc-border:        #3A3247;
    --cc-border-strong: #4C4359;

    --cc-primary:       var(--cc-coral-400);
    --cc-primary-hover: var(--cc-coral-300);
    --cc-text-on-brand: #2A1C1B;          /* dark text on light coral */
    --cc-secondary:     var(--cc-purple-300);
    --cc-focus-ring:    var(--cc-purple-300);
  }
}

:root[data-theme="dark"] {
  --cc-bg:            #1C1826;
  --cc-bg-raised:     #262032;
  --cc-bg-sunken:     #15121D;
  --cc-bg-inset:      #2F2840;
  --cc-text:          #F2ECE6;
  --cc-text-muted:    #B5ADA4;
  --cc-text-subtle:   #8B8279;
  --cc-border:        #3A3247;
  --cc-border-strong: #4C4359;
  --cc-primary:       var(--cc-coral-400);
  --cc-primary-hover: var(--cc-coral-300);
  --cc-text-on-brand: #2A1C1B;
  --cc-secondary:     var(--cc-purple-300);
  --cc-focus-ring:    var(--cc-purple-300);
}