/*
 * Linen UI — tokens.css
 * Retro desktop-app aesthetic — design asset tool.
 * Source Code Pro monospace. Warm parchment palette. Inset 3-D components.
 *
 * Cascade order:
 *   1. :root  — light mode defaults
 *   2. [data-theme="dark"]  — dark mode (wins last)
 */

/* ─── GOOGLE FONTS ───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;0,600;1,400&family=Inter:wght@400;500;600&display=swap');

/* ─── LIGHT MODE DEFAULTS ────────────────────────────────────────────────────── */
:root, [data-theme="light"] {

  /* ── Color: Brand ─────────────────────────────────────────────── */
  --color-brand-accent:          #d53a42;
  --color-brand-accent-hover:    #b52e35;
  --color-brand-accent-subtle:   rgba(213, 58, 66, 0.12);

  /* ── Color: Surface ───────────────────────────────────────────── */
  --color-background:            #faf7f0;  /* parchment */
  --color-surface:               #f1e9d6;  /* warm beige */
  --color-surface-raised:        #faf7f0;  /* glare — lightest */
  --color-surface-recessed:      #e6d8b8;  /* shadow — darker */
  --color-surface-muted:         #e6d8b8;
  --color-surface-overlay:       rgba(45, 55, 72, 0.5);

  /* ── Color: Screen panel ──────────────────────────────────────── */
  --color-screen:                #e3e4dd;  /* monitor surface */
  --color-screen-shade:          #ced0c3;  /* monitor shadow */
  --color-screen-shadow:         #a2a58d;  /* deepest shadow */
  --color-screen-text:           #000000;
  --color-screen-glare:          #faf7f0;

  /* ── Color: Text ──────────────────────────────────────────────── */
  --color-foreground:            #331e0b;  /* dark brown */
  --color-foreground-secondary:  #4a2e12;
  --color-foreground-muted:      #94804d;  /* golden brown */
  --color-foreground-subtle:     #b8a888;
  --color-foreground-disabled:   #c8bb9a;
  --color-foreground-inverse:    #faf7f0;
  --color-foreground-on-accent:  #ffffff;

  /* ── Color: Border ────────────────────────────────────────────── */
  --color-border:                #e6d8b8;  /* matches surface-recessed — same as live site */
  --color-border-strong:         #85896c;  /* olive */
  --color-border-focus:          var(--color-brand-accent);

  /* ── Color: Button variants ───────────────────────────────────── */
  --color-btn-yellow:            #ecc94b;  /* exact live value */
  --color-btn-yellow-hover:      #d69e2e;  /* exact live value */
  --color-btn-yellow-text:       #542e08;
  --color-btn-pink:              #ffcaba;
  --color-btn-pink-hover:        #ffa185;  /* exact live shadow value */
  --color-btn-pink-glare:        #ffefeb;  /* top-border highlight */
  --color-btn-pink-text:         #000000;

  /* ── Color: Semantic ─────────────────────────────────────────── */
  --color-success:               #2d7a3a;
  --color-success-subtle:        rgba(45, 122, 58, 0.12);
  --color-warning:               #c47b1a;
  --color-warning-subtle:        rgba(196, 123, 26, 0.12);
  --color-error:                 #d53a42;
  --color-error-subtle:          rgba(213, 58, 66, 0.12);
  --color-info:                  #2a4365;
  --color-info-subtle:           rgba(42, 67, 101, 0.12);
  --color-code:                  #1a7a34;  /* dark terminal green — readable on light screen panel */
  --color-link:                  #6a324f;  /* burgundy */

  /* ── Typography ───────────────────────────────────────────────── */
  --font-family-primary:         'Source Code Pro', 'Menlo', 'Consolas', 'Monaco', monospace;
  --font-family-alt:             'Lora', Georgia, 'Times New Roman', serif;  /* live site secondary font */
  --font-family-sans:            'Inter', system-ui, sans-serif;
  --font-family-mono:            'Source Code Pro', 'Menlo', 'Consolas', monospace;

  --font-size-micro:             0.625rem;   /* 10px */
  --font-size-xs:                0.75rem;    /* 12px */
  --font-size-sm:                0.8rem;     /* 12.8px — matches source */
  --font-size-base:              1rem;       /* 16px */
  --font-size-lg:                1.25rem;    /* 20px */
  --font-size-xl:                1.5rem;     /* 24px */
  --font-size-2xl:               2rem;       /* 32px */

  --font-weight-light:           300;
  --font-weight-normal:          400;
  --font-weight-medium:          500;
  --font-weight-semibold:        600;

  --line-height-tight:           1.2;
  --line-height-normal:          1.5;
  --line-height-relaxed:         1.625;

  --letter-spacing-normal:       0em;
  --letter-spacing-wide:         0.02em;  /* matches live site button spacing (was 0.05em) */
  --letter-spacing-wider:        0.05em;
  --letter-spacing-widest:       0.1em;

  /* ── Spacing (0.64rem = ~10px base) ──────────────────────────── */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    10px;    /* --space from source ≈ 0.64rem */
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;

  /* ── Shape / Radius ───────────────────────────────────────────── */
  --radius-none:   0px;
  --radius-xs:     2px;    /* button face */
  --radius-sm:     4px;    /* window header, nav-link */
  --radius-md:     6px;
  --radius-lg:     8px;
  --radius-xl:     12px;
  --radius-full:   9999px;

  /* Component-semantic (overrideable by seeds) */
  --radius-btn:    var(--radius-xs);   /* inset-button very square */
  --radius-card:   var(--radius-sm);
  --radius-input:  var(--radius-xs);
  --radius-window: var(--radius-sm);

  /* ── Elevation / Shadow ───────────────────────────────────────── */
  --shadow-none:   none;
  --shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-sm:     0 2px 4px rgba(0, 0, 0, 0.10);
  --shadow-md:     0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg:     0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-xl:     0 16px 40px rgba(0, 0, 0, 0.18);
  --shadow-card:   var(--shadow-sm);
  --shadow-window: 0 4px 16px rgba(0, 0, 0, 0.14);

  /* ── Motion ───────────────────────────────────────────────────── */
  --duration-fast:   100ms;
  --duration-normal: 150ms;
  --duration-slow:   300ms;
  --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);

  /* ── Z-Index ──────────────────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-nav:      300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Component metrics ────────────────────────────────────────── */
  --nav-height:     38px;
  --sidebar-width:  200px;
  --window-min-w:   200px;
}

/* ─── DARK MODE ────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {

  /* ── Color: Brand ─────────────────────────────────────────────── */
  --color-brand-accent:          #b1385e;  /* deep rose — exact live value */
  --color-brand-accent-hover:    #b1385e;
  --color-brand-accent-subtle:   rgba(177, 56, 94, 0.2);

  /* ── Color: Surface ───────────────────────────────────────────── */
  --color-background:            #2d3748;  /* confirmed live value */
  --color-surface:               #4a5568;  /* blue-slate panels — exact live value (was grey #393d3f) */
  --color-surface-raised:        #718096;  /* mid blue-grey — exact live value (was grey #474e52) */
  --color-surface-recessed:      #2f3233;
  --color-surface-muted:         #2f3233;
  --color-surface-overlay:       rgba(0, 0, 0, 0.6);

  /* ── Color: Screen panel ──────────────────────────────────────── */
  --color-screen:                #333333;
  --color-screen-shade:          #2a2a2a;
  --color-screen-shadow:         #000000;
  --color-screen-text:           #ffffff;
  --color-screen-glare:          #555555;

  /* ── Color: Text ──────────────────────────────────────────────── */
  --color-foreground:            #ffffff;  /* pure white — exact live value */
  --color-foreground-secondary:  #e2e8f0;
  --color-foreground-muted:      #a0aec0;
  --color-foreground-subtle:     #718096;
  --color-foreground-disabled:   #4a5568;
  --color-foreground-inverse:    #1a1a1a;
  --color-foreground-on-accent:  #ffffff;

  /* ── Color: Border ────────────────────────────────────────────── */
  --color-border:                rgba(255, 255, 255, 0.10);
  --color-border-strong:         #445f84;  /* blue border in dark */

  /* ── Color: Button variants — live site does NOT darken yellow in dark mode */
  --color-btn-yellow:            #ecc94b;  /* identical to light mode */
  --color-btn-yellow-hover:      #d69e2e;
  --color-btn-yellow-text:       #542e08;  /* identical to light mode */
  --color-btn-pink:              #774055;  /* dark maroon — exact live dark value */
  --color-btn-pink-hover:        #663045;
  --color-btn-pink-glare:        #9f566e;  /* live dark glare value */
  --color-btn-pink-text:         #ffffff;  /* white on dark maroon */

  /* ── Color: Semantic (dark overrides) ────────────────────────── */
  --color-link:                  #b1385e;  /* rose — matches dark accent */
  --color-code:                  #64c490;  /* muted green — exact live value */
  --color-border:                rgba(255, 255, 255, 0.12);

  /* ── Shadows ──────────────────────────────────────────────────── */
  --shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:     0 2px 4px rgba(0, 0, 0, 0.5);
  --shadow-md:     0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-lg:     0 8px 24px rgba(0, 0, 0, 0.7);
  --shadow-window: 0 4px 24px rgba(0, 0, 0, 0.6);
}

/* ─── BASE RESETS ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-active, var(--font-family-primary));
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-foreground);
  background-color: var(--color-background);
  margin: 0;
}

a { color: var(--color-link); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }