/* ============================================================
   Sinh Vũ — Color tokens
   Premium editorial palette. Deep navy + warm cream dominate;
   bordeaux carries brand depth; signal red is a precise accent
   used sparingly. Red is a mark, never an environment.
   ============================================================ */

:root {
  /* ---- Brand core (raw values) ---- */
  --color-bordeaux:    #6C0E23; /* primary brand depth, founder's seal */
  --color-signal-red:  #C42021; /* sharp accent — CTAs, focus, marks */
  --color-warm-cream:  #FFEAAE; /* warmth, paper, craft */
  --color-deep-navy:   #021731; /* trust, strategy, dominant dark */
  --color-studio-blue: #04395E; /* structure, secondary dark, system */

  /* ---- Neutral support ---- */
  --color-off-white:   #F8F5EF;
  --color-warm-paper:  #F3E8D2;
  --color-charcoal:    #161A1D;
  --color-soft-gray:   #E5E0D8;
  --color-muted-text:  #6D6A64;
  --color-white:       #FFFFFF;

  /* ---- Derived tints & shades (for hover / press / layering) ---- */
  --color-bordeaux-deep:   #520A1A; /* press / deepest */
  --color-bordeaux-soft:   #8A1730; /* hover lift */
  --color-signal-red-deep: #9E1A1A; /* pressed accent */
  --color-signal-red-soft: #D94544; /* hover accent */
  --color-navy-900:        #010F24; /* footer / deepest panel */
  --color-navy-800:        #04244C; /* deep panel */
  --color-navy-700:        #0A2C54; /* raised navy surface */
  --color-studio-blue-700: #0A4A75; /* hover on studio blue */
  --color-cream-deep:      #F2D98A; /* pressed cream surface */
  --color-cream-soft:      #FFF3CC; /* hover on cream */
  --color-paper-line:      #E2D4B8; /* hairline on cream surfaces */

  /* ---- Functional / status ---- */
  --color-success: #1F6B4A;
  --color-warning: #B5731A;
  --color-danger:  #C42021;
  --color-info:    #04395E;
  --color-ai:      #5B4B8A;

  /* Status TEXT tokens — darkened for WCAG AA (≥4.5:1) on the tinted
     status-badge backgrounds. Use these for text/icons; keep the base
     --color-* above for fills, bars, and dots where lighter reads fine. */
  --text-status-success:  #17563B;
  --text-status-warning:  #855214;
  --text-status-critical: #A4191A;
  --text-status-info:     #04395E;
  --text-status-founder:  #6C0E23;
  --text-status-ai:       #4A3B73;

  /* ============================================================
     Semantic aliases — LIGHT environment (default)
     Use these in components, not raw values.
     ============================================================ */

  /* Surfaces */
  --surface-page:     var(--color-off-white);
  --surface-card:     var(--color-white);
  --surface-paper:    var(--color-warm-paper);
  --surface-raised:   var(--color-white);
  --surface-sunken:   var(--color-soft-gray);
  --surface-inverse:  var(--color-deep-navy);
  --surface-brand:    var(--color-bordeaux);

  /* Text */
  --text-primary:   var(--color-charcoal);
  --text-secondary: var(--color-muted-text);
  --text-brand:     var(--color-bordeaux);
  --text-accent:    var(--color-signal-red);
  --text-inverse:   var(--color-off-white);
  --text-on-brand:  var(--color-warm-cream);

  /* Borders & lines */
  --border-subtle:  var(--color-soft-gray);
  --border-strong:  #CFC8BB;
  --border-brand:   var(--color-bordeaux);
  --border-focus:   var(--color-signal-red);
  --hairline:       var(--color-paper-line);

  /* Accent system */
  --accent:         var(--color-signal-red);
  --accent-hover:   var(--color-signal-red-soft);
  --accent-press:   var(--color-signal-red-deep);

  /* Brand actions */
  --brand:          var(--color-bordeaux);
  --brand-hover:    var(--color-bordeaux-soft);
  --brand-press:    var(--color-bordeaux-deep);

  /* Focus ring */
  --ring: 0 0 0 3px color-mix(in srgb, var(--color-signal-red) 35%, transparent);
}

/* ============================================================
   Semantic aliases — DARK environment
   Apply with [data-theme="dark"] on any container or <body>.
   Deep navy dominant; cream/gold for emphasis; red as a mark.
   ============================================================ */

[data-theme="dark"] {
  /* Premium near-black navy environment — deeper, more black for luxury. */
  --surface-page:     #02101D;
  --surface-card:     var(--color-deep-navy);
  --surface-paper:    var(--color-navy-800);
  --surface-raised:   var(--color-navy-800);
  --surface-sunken:   #010A14;
  --surface-inverse:  var(--color-off-white);
  --surface-brand:    var(--color-bordeaux);

  --text-primary:   var(--color-off-white);
  --text-secondary: color-mix(in srgb, var(--color-off-white) 62%, transparent);
  --text-brand:     var(--color-warm-cream);
  --text-accent:    var(--color-signal-red-soft);
  --text-inverse:   var(--color-charcoal);
  --text-on-brand:  var(--color-warm-cream);

  --border-subtle:  color-mix(in srgb, var(--color-off-white) 14%, transparent);
  --border-strong:  color-mix(in srgb, var(--color-off-white) 24%, transparent);
  --border-brand:   var(--color-warm-cream);
  --border-focus:   var(--color-signal-red-soft);
  --hairline:       color-mix(in srgb, var(--color-off-white) 10%, transparent);

  --accent:         var(--color-signal-red-soft);
  --accent-hover:   #E66362;
  --accent-press:   var(--color-signal-red);

  --brand:          var(--color-warm-cream);
  --brand-hover:    var(--color-cream-soft);
  --brand-press:    var(--color-cream-deep);

  --ring: 0 0 0 3px color-mix(in srgb, var(--color-warm-cream) 30%, transparent);

  /* Status text — DARK: lightened so it reads on the dark tinted badge
     backgrounds (the light-mode darkened values are unreadable on dark). */
  --text-status-success:  #79CFA4;
  --text-status-warning:  #E6B167;
  --text-status-critical: #EC9A97;
  --text-status-info:     #84B4DC;
  --text-status-founder:  var(--color-warm-cream);
  --text-status-ai:       #B7A7E0;
}