/* ===================================================================
   PestOS — Design Tokens
   Foundations: warm "paper-white keyboard" surfaces, purple primary,
   chunky keycap elevation, Kanit display + JetBrains Mono data.
   Light is the source of truth; dark is provided as a full token set.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* -------------------------------------------------------------------
   1. PRIMITIVES — raw palette. Don't reference these in product code;
   use the semantic tokens in section 2.
   ------------------------------------------------------------------- */
:root {
  /* Warm neutrals — "old keyboard plastic" ramp, ABS-beige to ink */
  --paper-50:  #FCFBF6;  /* keycap face highlight        */
  --paper-100: #F7F5EE;  /* card / surface               */
  --paper-200: #EFECE1;  /* canvas                        */
  --paper-300: #E5E1D3;  /* sunken well / desk            */
  --paper-400: #D6D0BF;  /* soft divider, track          */
  --paper-500: #BCB5A0;  /* disabled fill                 */
  --paper-600: #8C8675;  /* muted text on paper           */
  --paper-700: #5E594C;  /* secondary text                */
  --paper-800: #36332B;  /* strong text                   */
  --paper-900: #211F1A;  /* ink — near-black, warm        */
  --paper-950: #14130F;  /* hard border / keycap wall     */

  /* Purple — primary brand ramp */
  --violet-50:  #F1ECFF;
  --violet-100: #E4D9FF;
  --violet-200: #CDBAFF;
  --violet-300: #AE90FB;
  --violet-400: #936CF2;
  --violet-500: #7A45E0;  /* PRIMARY                      */
  --violet-600: #652EC9;
  --violet-700: #4F22A4;  /* keycap wall / pressed        */
  --violet-800: #3A1880;
  --violet-900: #271056;

  /* Functional — muted to sit on warm paper */
  --green-100: #DCEFE0;  --green-500: #2E9E5B;  --green-700: #1E6E3E;
  --amber-100: #FAEDCB;  --amber-500: #E59914;  --amber-700: #A66A07;
  --red-100:   #FADFDC;  --red-500:   #DE433A;  --red-700:   #A22A23;
  --blue-100:  #D8E8FB;  --blue-500:  #2F77D6;  --blue-700:  #1B5099;

  /* Pure */
  --white: #FFFFFF;
  --black: #14130F;
}

/* -------------------------------------------------------------------
   2. SEMANTIC TOKENS — LIGHT (default). Reference these everywhere.
   ------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --bg:            var(--paper-200);   /* app canvas / desk        */
  --surface:       var(--paper-100);   /* cards, sheets            */
  --surface-raised:var(--paper-50);    /* keycap face, popovers    */
  --surface-sunken:var(--paper-300);   /* input wells, tracks      */
  --overlay:       rgba(20,19,15,0.55);/* modal scrim              */

  /* Text */
  --fg:        var(--paper-900);
  --fg-2:      var(--paper-700);
  --fg-3:      var(--paper-600);
  --fg-on-accent: #FFFFFF;
  --fg-disabled:  var(--paper-500);

  /* Lines */
  --border:        var(--paper-950);   /* hard, chunky key outline */
  --border-soft:   var(--paper-400);   /* dividers, subtle frames  */
  --border-input:  var(--paper-800);

  /* Brand + functional (semantic aliases) */
  --primary:        var(--violet-500);
  --primary-hover:  var(--violet-600);
  --primary-wall:   var(--violet-700);  /* hard shadow under primary keys */
  --primary-tint:   var(--violet-50);
  --primary-tint-2: var(--violet-100);
  --on-primary:     #FFFFFF;

  --success:      var(--green-500);  --success-tint: var(--green-100); --success-ink: var(--green-700);
  --warning:      var(--amber-500);  --warning-tint: var(--amber-100); --warning-ink: var(--amber-700);
  --danger:       var(--red-500);    --danger-tint:  var(--red-100);   --danger-ink:  var(--red-700);
  --info:         var(--blue-500);   --info-tint:    var(--blue-100);  --info-ink:    var(--blue-700);

  /* Keycap elevation — the chunky press system.
     A key sits on a "wall"; pressing it sinks the face onto the wall. */
  --key-wall:      var(--paper-950);   /* default neutral wall color */
  --key-rise:      4px;                /* how tall an idle key sits   */
  --key-rise-sink: 2px;                /* depth left when held        */

  /* Hard offset shadows (no blur) — keycap + sticker look */
  --shadow-key:    0 var(--key-rise) 0 0 var(--key-wall);
  --shadow-key-sm: 0 2px 0 0 var(--key-wall);
  --shadow-card:   4px 4px 0 0 var(--paper-950);
  --shadow-card-soft: 0 2px 0 0 var(--border-soft);
  /* Ambient soft shadow for floating sheets / menus */
  --shadow-pop:    0 10px 24px -8px rgba(20,19,15,0.30), 0 2px 0 0 var(--paper-950);
}

/* -------------------------------------------------------------------
   3. SEMANTIC TOKENS — DARK ("after-hours / dark keyboard")
   ------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #14130F;
  --surface:       #201E18;
  --surface-raised:#2A2820;
  --surface-sunken:#100F0C;
  --overlay:       rgba(0,0,0,0.62);

  --fg:        #F3F0E6;
  --fg-2:      #B8B2A2;
  --fg-3:      #847E6E;
  --fg-on-accent: #FFFFFF;
  --fg-disabled:  #4A463C;

  --border:        #000000;
  --border-soft:   #36332A;
  --border-input:  #4A463C;

  --primary:        var(--violet-400);
  --primary-hover:  var(--violet-300);
  --primary-wall:   var(--violet-800);
  --primary-tint:   #241A3D;
  --primary-tint-2: #2F2350;
  --on-primary:     #14130F;

  --success: #4CC07A; --success-tint: #15301F; --success-ink: #8FE0AB;
  --warning: #F2B23E; --warning-tint: #322611; --warning-ink: #F6CF82;
  --danger:  #F0635A; --danger-tint:  #331513; --danger-ink:  #F6A39C;
  --info:    #5497EC; --info-tint:    #122236; --info-ink:    #9BC2F4;

  --key-wall:      #000000;
  --shadow-key:    0 var(--key-rise) 0 0 var(--key-wall);
  --shadow-key-sm: 0 2px 0 0 var(--key-wall);
  --shadow-card:   4px 4px 0 0 #000000;
  --shadow-card-soft: 0 2px 0 0 var(--border-soft);
  --shadow-pop:    0 12px 28px -8px rgba(0,0,0,0.6), 0 2px 0 0 #000000;
}

/* -------------------------------------------------------------------
   4. TYPOGRAPHY
   Kanit  → display, headings, UI labels, buttons (geometric, sporty)
   JetBrains Mono → data, codes, timestamps, job IDs, metadata
   ------------------------------------------------------------------- */
:root {
  --font-display: 'Kanit', system-ui, sans-serif;
  --font-ui:      'Kanit', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Type scale — tuned for a phone-first ops app (8pt-ish rhythm) */
  --text-display: 800 40px/1.02 var(--font-display);
  --text-h1:      700 30px/1.08 var(--font-display);
  --text-h2:      700 24px/1.14 var(--font-display);
  --text-h3:      600 20px/1.2  var(--font-display);
  --text-title:   600 17px/1.25 var(--font-ui);
  --text-body:    400 16px/1.5  var(--font-ui);
  --text-body-sm: 400 14px/1.45 var(--font-ui);
  --text-label:   600 13px/1.2  var(--font-ui);   /* button / chip text */
  --text-caption: 400 13px/1.4  var(--font-ui);

  /* Mono — data & system voice */
  --text-data:    500 14px/1.3  var(--font-mono);
  --text-data-sm: 500 12px/1.3  var(--font-mono);
  --text-mono-eyebrow: 700 11px/1.2 var(--font-mono); /* uppercase eyebrow */

  /* Letter-spacing helpers */
  --track-tight:  -0.01em;
  --track-eyebrow: 0.12em;
}

/* -------------------------------------------------------------------
   5. SPACING, RADII, SIZING
   ------------------------------------------------------------------- */
:root {
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  --radius-sm:  6px;    /* chips, inputs            */
  --radius-md:  10px;   /* buttons, keycaps         */
  --radius-lg:  14px;   /* cards                    */
  --radius-xl:  20px;   /* sheets, modals           */
  --radius-pill: 999px;

  --border-w:   2px;    /* default chunky stroke    */
  --border-w-thick: 2.5px;

  --tap-min:    48px;   /* minimum hit target (field gloves!) */
}

/* -------------------------------------------------------------------
   6. SEMANTIC ELEMENT DEFAULTS — convenient base classes
   ------------------------------------------------------------------- */
.ds-h1      { font: var(--text-h1);   letter-spacing: var(--track-tight); color: var(--fg); margin: 0; }
.ds-h2      { font: var(--text-h2);   letter-spacing: var(--track-tight); color: var(--fg); margin: 0; }
.ds-h3      { font: var(--text-h3);   color: var(--fg); margin: 0; }
.ds-title   { font: var(--text-title); color: var(--fg); margin: 0; }
.ds-body    { font: var(--text-body); color: var(--fg-2); margin: 0; }
.ds-caption { font: var(--text-caption); color: var(--fg-3); margin: 0; }
.ds-data    { font: var(--text-data); color: var(--fg); letter-spacing: 0; }
.ds-eyebrow {
  font: var(--text-mono-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0;
}

/* Animation tokens — quick, springy, satisfying. Nothing floaty. */
:root {
  --ease-snap:  cubic-bezier(0.2, 0.9, 0.3, 1.2); /* slight overshoot */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-press:  90ms;
  --dur-ui:     160ms;
}