/*
 * tokens.css — StartupYug unified design token layer
 *
 * Decision #1 HYBRID: both warm-editorial (public) and cool-admin (member)
 * ranges live in the same palette as named custom properties.
 * The layout shell applies .surface-public or .surface-member to activate
 * the appropriate range — components reference token variables and render
 * correctly on both surfaces.
 *
 * Sources: /tmp/sy-design/styles.css (public) + /tmp/sy-members/members.css (member)
 * Values extracted verbatim per 01-design-tokens.md.
 */

/* ─── ROOT: base defaults (surface-neutral) ──────────────────────────────── */

:root {
  /* ── Typography ── */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', serif;              /* public display headings only */
  --font-mono:    'JetBrains Mono', monospace;    /* kbd hints only */

  /* ── Type scale (unified — covers both design systems' observed sizes) ── */
  --text-2xs:  9px;
  --text-xs:   11px;
  --text-sm:   12px;
  --text-sm2:  13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;
  --text-4xl:  32px;
  --text-5xl:  40px;
  --text-6xl:  48px;

  /* ── Font weights ── */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ── Spacing scale (4px base, covers both systems' observed values) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Radii ── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius:    8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ── Transitions ── */
  --transition:      .15s ease;
  --transition-menu: .18s ease;
  --transition-draw: .25s ease;

  /* ── Container ── */
  --container-max: 1320px;
  --container-pad: 28px;

  /* ── Sidebar width (member) ── */
  --sidebar-w: 250px;

  /* ────────────────────────────────────────────────────────────────────── */
  /* WARM-EDITORIAL PALETTE (public surface tokens — prefixed --p-) */
  /* ────────────────────────────────────────────────────────────────────── */

  /* Background / surface */
  --p-bg:        #fbf7f0;   /* warm cream */
  --p-bg-alt:    #ffffff;
  --p-bg-deep:   #f3ede0;

  /* Ink / text */
  --p-ink:       #1a1410;   /* cocoa near-black */
  --p-ink-2:     #4a3f33;
  --p-ink-3:     #7a6f60;
  --p-ink-4:     #a89d8c;

  /* Borders */
  --p-line:      #ece4d3;
  --p-line-2:    #e3d9c2;
  --p-line-soft: #f5efde;

  /* Brand accent */
  --p-sun:       #f5b800;   /* logo yellow */
  --p-sun-deep:  #d99a00;
  --p-cocoa:     #2a1a0a;   /* dark earth */

  /* Category accent colors (9) */
  --c-fund:        #1f7a3a;
  --c-fund-soft:   #e6f3ea;
  --c-job:         #c1631a;
  --c-job-soft:    #fbeede;
  --c-learn:       #6b3fb8;
  --c-learn-soft:  #efe7fa;
  --c-founder:     #b8336a;
  --c-founder-soft:#faeaf1;
  --c-invest:      #1a4fb5;
  --c-invest-soft: #e3ecfa;
  --c-case:        #0d6e6e;
  --c-case-soft:   #dcefef;
  --c-saas:        #047893;
  --c-saas-soft:   #def0f4;
  --c-deal:        #c0392b;
  --c-deal-soft:   #fae5e2;
  --c-agent:       #7a5b1a;
  --c-agent-soft:  #f4ecd6;

  /* Shadows (warm, cocoa-tinted) */
  --p-shadow-menu:   0 24px 60px -20px rgba(42,26,10,.18), 0 4px 12px -4px rgba(42,26,10,.08);
  --p-shadow-card:   0 12px 24px -16px rgba(42,26,10,.18);
  --p-shadow-drawer: -20px 0 40px -10px rgba(42,26,10,.2);
  --p-focus-ring:    0 0 0 3px rgba(245,184,0,.2);

  /* ────────────────────────────────────────────────────────────────────── */
  /* COOL-ADMIN PALETTE (member surface tokens — prefixed --m-) */
  /* ────────────────────────────────────────────────────────────────────── */

  /* Sidebar */
  --m-sidebar-bg:          #1e293b;
  --m-sidebar-text:        #94a3b8;
  --m-sidebar-text-hover:  #f1f5f9;
  --m-sidebar-active-bg:   rgba(255,255,255,.08);
  --m-sidebar-active-text: #ffffff;
  --m-sidebar-section:     #64748b;
  --m-sidebar-border:      #334155;

  /* Body / surface */
  --m-bg:           #f8fafc;
  --m-card-bg:      #ffffff;
  --m-text-heading: #0f172a;
  --m-text-body:    #334155;
  --m-text-muted:   #64748b;
  --m-text-light:   #94a3b8;
  --m-border:       #e2e8f0;

  /* Primary action */
  --m-primary:       #3b82f6;   /* blue 500 */
  --m-primary-hover: #2563eb;
  --m-primary-light: #eff6ff;
  --m-primary-soft:  rgba(59,130,246,.08);

  /* Semantic states */
  --m-success:       #16a34a;
  --m-success-light: #f0fdf4;
  --m-warning:       #d97706;
  --m-warning-light: #fffbeb;
  --m-danger:        #dc2626;
  --m-danger-light:  #fef2f2;

  /* Shadows (flat/minimal) */
  --m-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --m-shadow:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --m-focus-ring: 0 0 0 3px rgba(59,130,246,.12);

  /* ────────────────────────────────────────────────────────────────────── */
  /* ACTIVE SURFACE ALIASES — resolved by .surface-public / .surface-member */
  /* Components reference these aliases; the surface class below resolves them */
  /* ────────────────────────────────────────────────────────────────────── */

  /* Defaults to member (cool-admin) so tokens are always defined */
  --bg:           var(--m-bg);
  --bg-card:      var(--m-card-bg);
  --text-primary: var(--m-text-heading);
  --text-body:    var(--m-text-body);
  --text-muted:   var(--m-text-muted);
  --border:       var(--m-border);
  --accent:       var(--m-primary);
  --accent-hover: var(--m-primary-hover);
  --focus-ring:   var(--m-focus-ring);
  --shadow-card:  var(--m-shadow);
  --radius-card:  var(--radius);

  /* Semantic state aliases — resolved by surface class.
     These are surface-agnostic so .btn-danger / .form-control.is-invalid /
     etc. render correctly on both public and member without per-surface forks. */
  --danger:        var(--m-danger);
  --danger-hover:  #b91c1c;
  --danger-light:  var(--m-danger-light);
  --success:       var(--m-success);
  --success-hover: #15803d;
  --success-light: var(--m-success-light);
  --warning:       var(--m-warning);
  --warning-light: var(--m-warning-light);
}


/* ─── SURFACE: PUBLIC (warm-editorial) ──────────────────────────────────── */
/* Applied to <body> or layout wrapper on all public-shell pages */

.surface-public {
  --bg:           var(--p-bg);
  --bg-card:      var(--p-bg-alt);
  --text-primary: var(--p-ink);
  --text-body:    var(--p-ink-2);
  --text-muted:   var(--p-ink-3);
  --border:       var(--p-line);
  --accent:       var(--p-cocoa);
  --accent-hover: #1a0c02;
  --focus-ring:   var(--p-focus-ring);
  --shadow-card:  var(--p-shadow-card);
  --radius-card:  var(--radius-md);

  /* Public-surface semantic states — warm-palette tints */
  --danger:        var(--c-deal);
  --danger-hover:  #9c2f23;
  --danger-light:  var(--c-deal-soft);
  --success:       var(--c-fund);
  --success-hover: #185f2c;
  --success-light: var(--c-fund-soft);
  --warning:       var(--c-job);
  --warning-light: var(--c-job-soft);
}


/* ─── SURFACE: MEMBER (cool-admin) ──────────────────────────────────────── */
/* Applied to <body> or layout wrapper on all member-shell pages */
/* Also the default :root values so this class is optional if :root is used */

.surface-member {
  --bg:           var(--m-bg);
  --bg-card:      var(--m-card-bg);
  --text-primary: var(--m-text-heading);
  --text-body:    var(--m-text-body);
  --text-muted:   var(--m-text-muted);
  --border:       var(--m-border);
  --accent:       var(--m-primary);
  --accent-hover: var(--m-primary-hover);
  --focus-ring:   var(--m-focus-ring);
  --shadow-card:  var(--m-shadow);
  --radius-card:  var(--radius);

  /* Member-surface semantic states — cool-admin tints (defaults) */
  --danger:        var(--m-danger);
  --danger-hover:  #b91c1c;
  --danger-light:  var(--m-danger-light);
  --success:       var(--m-success);
  --success-hover: #15803d;
  --success-light: var(--m-success-light);
  --warning:       var(--m-warning);
  --warning-light: var(--m-warning-light);
}


/* ─── BREAKPOINTS (reference — use in @media queries) ───────────────────── */
/*
  Public breakpoints (styles.css):
    @media (max-width: 1180px)  — mid desktop
    @media (max-width: 980px)   — tablet landscape / mobile nav
    @media (max-width: 768px)   — tablet portrait
    @media (max-width: 540px)   — phone

  Member breakpoints (members.css):
    @media (max-width: 768px)   — sidebar slides off
    @media (max-width: 480px)   — stats 1-col
*/