/* ==========================================================================
   COLORS — Canon Website OS
   ==========================================================================
   Ground truth: CANON_WEBSITE_DESIGN_OS.txt §10 "Default Layout Foundations":
     bg #0B0F14 · surface #121821 · text #F5F7FA · muted #A0AEC0
     primary #3B82F6 · accent #22C55E · border #243041
   The OS calls these placeholders ("replace with brand kit when provided") —
   per the brief for THIS system, they are kept exactly as given and treated
   as the permanent palette for the neutral, brand-agnostic kit.

   #3B82F6 and #22C55E are Tailwind's blue-500 / green-500 exactly, so the
   extended tint/shade ramps below continue Tailwind's published scale for
   those two hues rather than inventing a new ramp. The neutral ramp is
   hand-extended between the four given anchor points (950/900/700/50) to
   keep one consistent cool blue-gray hue.

   Everything is dark-mode only — the OS defines a single dark theme with no
   light-mode variant, so there is no [data-theme] switch here.
   ========================================================================== */

:root {
  /* ---- neutral ramp (cool blue-gray, anchored at OS values) ---- */
  --gray-950: #0B0F14;  /* OS "bg" */
  --gray-900: #121821;  /* OS "surface" */
  --gray-850: #161D27;
  --gray-800: #1C2530;
  --gray-700: #243041;  /* OS "border" */
  --gray-600: #34445A;
  --gray-500: #4C5D75;
  --gray-400: #6B7C93;
  --gray-300: #A0AEC0;  /* OS "muted" */
  --gray-200: #C7D1DE;
  --gray-100: #E2E7ED;
  --gray-50:  #F5F7FA;  /* OS "text" */

  /* ---- brand blue (primary) — Tailwind blue scale, 500 = OS anchor ---- */
  --blue-50:  #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;  /* OS "primary" */
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-800: #1E40AF;
  --blue-900: #1E3A8A;

  /* ---- brand green (accent) — Tailwind green scale, 500 = OS anchor ---- */
  --green-50:  #F0FDF4;
  --green-100: #DCFCE7;
  --green-200: #BBF7D0;
  --green-300: #86EFAC;
  --green-400: #4ADE80;
  --green-500: #22C55E;  /* OS "accent" */
  --green-600: #16A34A;
  --green-700: #15803D;
  --green-800: #166534;

  /* ---- status colors (intentional addition — see readme.md) ---- */
  --red-400:   #F87171;
  --red-500:   #EF4444;  /* error / decline */
  --red-600:   #DC2626;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;  /* scarcity / urgency accent */
  --amber-600: #D97706;

  /* ================= SEMANTIC ALIASES — use these in components ================= */

  /* surfaces */
  --surface-page:      var(--gray-950);   /* body background */
  --surface-card:       var(--gray-900);   /* card / panel background */
  --surface-raised:    var(--gray-850);   /* hovered card, popovers, nav */
  --surface-sunken:    #080B0F;           /* inputs, code, wells — darker than page */
  --surface-inverse:   var(--gray-50);    /* rare: light chip on dark page */

  /* borders */
  --border-subtle:     var(--gray-800);
  --border-default:    var(--gray-700);   /* OS "border" — default card/input outline */
  --border-strong:     var(--gray-600);

  /* text */
  --text-primary:      var(--gray-50);    /* OS "text" */
  --text-secondary:    var(--gray-300);   /* OS "muted" */
  --text-tertiary:     var(--gray-500);   /* placeholders, disabled, timestamps */
  --text-on-brand:     var(--gray-50);    /* text sitting on solid primary/accent fill */
  --text-link:         var(--blue-400);
  --text-link-hover:   var(--blue-300);

  /* brand actions */
  --action-primary:          var(--blue-500);   /* OS "primary" */
  --action-primary-hover:    var(--blue-600);
  --action-primary-active:   var(--blue-700);
  --action-primary-subtle:  rgba(59, 130, 246, 0.12);  /* tinted bg, e.g. secondary button */

  --action-accent:           var(--green-500);  /* OS "accent" */
  --action-accent-hover:     var(--green-600);
  --action-accent-active:    var(--green-700);
  --action-accent-subtle:   rgba(34, 197, 94, 0.12);

  /* status */
  --status-danger:      var(--red-500);
  --status-danger-subtle: rgba(239, 68, 68, 0.12);
  --status-warning:      var(--amber-500);
  --status-warning-subtle: rgba(245, 158, 11, 0.12);
  --status-success:      var(--green-500);

  /* focus + glow */
  --focus-ring-color:        rgba(59, 130, 246, 0.45);
  --glow-primary:            rgba(59, 130, 246, 0.25);
  --glow-accent:             rgba(34, 197, 94, 0.20);
}