/* Hard Hat Sports — Color tokens
   ============================================================
   Base palette derived from the brand emblem: brass-gold helmet,
   chrome/steel wordmark, charcoal field. Dark is the hero surface;
   warm "paper" is the document/proposal surface.
   ============================================================ */
:root {
  /* --- Steel / charcoal (dark surfaces) --- */
  --steel-950: #131315;
  --steel-900: #161618;
  --steel-850: #1C1C1F;
  --steel-800: #232327;
  --steel-700: #2E2E33;
  --steel-600: #3A3A40;
  --steel-500: #4A4A52;

  /* --- Brass / gold (the accent — from the helmet) --- */
  --gold-200: #F0DCA6;
  --gold-300: #E6C878;
  --gold-400: #D4AF5A;
  --gold-500: #C49A45;   /* PRIMARY brand gold */
  --gold-600: #A67E32;
  --gold-700: #7E5E22;
  --gold-800: #5A4318;

  /* --- Chrome / silver (secondary metallic neutral) --- */
  --chrome-50:  #F1F0EC;
  --chrome-100: #E2E0DA;
  --chrome-300: #BFBDB6;
  --chrome-500: #908E87;
  --chrome-700: #5E5C56;

  /* --- Paper (warm light surfaces — docs, proposals) --- */
  --paper-50:  #F6F5F2;
  --paper-100: #EEEDE8;
  --paper-200: #E2E0D9;
  --paper-300: #D2D0C7;

  /* --- Ink (text) --- */
  --ink-900: #1A1A1C;
  --ink-700: #54524C;
  --ink-500: #8A887F;
  --ink-on-dark:        #F4F3EF;
  --ink-on-dark-muted:  #B0AEA6;
  --ink-on-dark-subtle: #7C7A73;

  /* --- Metallic gradients (the emblem's signature finish) --- */
  --grad-gold: linear-gradient(150deg, #F0DCA6 0%, #C49A45 42%, #8C6A26 100%); /* @kind color */
  --grad-chrome: linear-gradient(150deg, #FBFAF7 0%, #C7C5BE 45%, #8C8A83 100%); /* @kind color */
  --grad-steel: linear-gradient(160deg, #2E2E33 0%, #1C1C1F 100%); /* @kind color */

  /* --- Hazard / caution-stripe motif (PPE + jobsite) --- */
  --hazard-stripes: repeating-linear-gradient(135deg,
    var(--gold-500) 0 14px, var(--steel-900) 14px 28px); /* @kind color */

  /* --- Semantic (kept minimal; safety-coded) --- */
  --safety-green:  #3FA34D;
  --safety-amber:  #E08A1E;
  --safety-red:    #C5453B;

  /* ============================================================
     SEMANTIC ALIASES — default theme is DARK (the emblem world)
     ============================================================ */
  --canvas:          var(--steel-850);
  --canvas-deep:     var(--steel-950);
  --surface-1:       var(--steel-800);
  --surface-2:       var(--steel-700);
  --hairline:        rgba(255, 255, 255, 0.10);
  --hairline-strong: var(--steel-600);

  --text-primary: var(--ink-on-dark);
  --text-muted:   var(--ink-on-dark-muted);
  --text-subtle:  var(--ink-on-dark-subtle);

  --accent:        var(--gold-500);
  --accent-hover:  var(--gold-400);
  --accent-press:  var(--gold-700);
  --accent-soft:   rgba(196, 154, 69, 0.14);
  --on-accent:     #1A1407;

  --link:        var(--gold-400);
  --link-hover:  var(--gold-300);

  --success: var(--safety-green);
  --warning: var(--safety-amber);
  --danger:  var(--safety-red);

  --focus-ring: var(--gold-400);
}

/* ============================================================
   PAPER THEME — warm light surface for documents & proposals
   Apply via [data-theme="paper"] on any container.
   ============================================================ */
[data-theme="paper"] {
  --canvas:          var(--paper-50);
  --canvas-deep:     var(--paper-100);
  --surface-1:       var(--paper-100);
  --surface-2:       var(--paper-200);
  --hairline:        var(--paper-300);
  --hairline-strong: #C9C7BF;

  --text-primary: var(--ink-900);
  --text-muted:   var(--ink-700);
  --text-subtle:  var(--ink-500);

  --accent:       var(--gold-600);
  --accent-hover: var(--gold-500);
  --accent-press: var(--gold-700);
  --accent-soft:  rgba(166, 126, 50, 0.12);
  --on-accent:    #FFFFFF;

  --link:        var(--gold-700);
  --link-hover:  var(--gold-600);

  --grad-steel:  linear-gradient(160deg, #FFFFFF 0%, #EEEDE8 100%);
  --focus-ring:  var(--gold-600);
}