/* Copied verbatim from Apps/pa-toolbox/shared/design/tokens.css (shared design system). Edit there, then re-copy. */
/* ==========================================================================
   FONTS
   Inter for UI text, JetBrains Mono for code / IDs.
   NOTE: substituted from Google Fonts — the source app ships a standard
   sans (likely Inter or system-ui). Swap for the real webfont files if you
   have them. Flagged in readme.md.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
/* ==========================================================================
   COLORS — Prisma Access Toolbox
   Amber accent on a Tailwind-slate neutral system.
   ========================================================================== */

:root {
  /* --- Brand amber (primary) --- */
  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde9a9;   /* disabled / soft fills */
  --amber-300: #fcd34d;
  --amber-400: #fbc123;   /* PRIMARY — buttons, selected states, badges */
  --amber-500: #f5b301;
  --amber-600: #d99a00;   /* hover / pressed */
  --amber-700: #b57e00;

  /* Tinted amber surfaces (selected tab background) */
  --amber-tint:   #fffcf4;
  --amber-tint-2: #fff9e8;

  /* --- Slate neutrals --- */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --white: #ffffff;

  /* --- Semantic status --- */
  --allow:   #16a34a;   /* green — allow */
  --allow-bg:#dcfce7;
  --block:   #dc2626;   /* red — block */
  --block-bg:#fee2e2;
  --prompt:  #d97706;   /* orange — prompt / warn */
  --prompt-bg:#ffedd5;
  --info:    #2563eb;   /* blue — links / info */
  --info-bg: #dbeafe;

  /* ==== Semantic aliases ==== */
  --bg-app:        var(--slate-50);
  --surface-card:  var(--white);
  --surface-sunken:var(--slate-100);
  --surface-hover: var(--slate-50);

  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --border-focus:  var(--amber-400);

  --text-heading:  var(--slate-900);
  --text-body:     var(--slate-700);
  --text-muted:    var(--slate-500);
  --text-faint:    var(--slate-400);
  --text-link:     var(--info);
  --text-on-primary: var(--slate-900);

  --primary:       var(--amber-400);
  --primary-hover: var(--amber-500);
  --primary-press: var(--amber-600);
  --primary-soft:  var(--amber-200);
  --primary-text:  var(--amber-600);   /* accent text on tinted/neutral bg */
  --focus-ring:    color-mix(in srgb, var(--amber-400) 45%, transparent);
}

/* ==========================================================================
   DARK THEME — dark slate surfaces, amber accent retained.
   Toggle by setting data-theme="dark" on <html> (or any ancestor).
   Only semantic aliases + amber tints are re-pointed; base ramps unchanged.
   ========================================================================== */

[data-theme="dark"] {
  /* Amber tints become low-alpha washes over dark surfaces */
  --amber-tint:   rgba(251, 193, 35, 0.12);
  --amber-tint-2: rgba(251, 193, 35, 0.15);

  /* Near-black grey surfaces (matches Strata console) */
  --bg-app:        #0a0a0a;
  --surface-card:  #1a1a1a;
  --surface-sunken:#000000;
  --surface-hover: rgba(255, 255, 255, 0.05);

  --border:        #2e2e2e;
  --border-strong: #404040;
  --border-focus:  var(--amber-400);

  --text-heading:  #f5f5f5;
  --text-body:     #d4d4d4;
  --text-muted:    #9e9e9e;
  --text-faint:    #6b6b6b;
  --text-link:     #60a5fa;               /* blue-400, lifted for dark */
  --text-on-primary: var(--slate-900);    /* amber stays bright; dark text reads on it */

  --primary-soft:  color-mix(in srgb, var(--amber-400) 22%, transparent);
  --primary-text:  var(--amber-300);      /* brighter accent text on dark */

  /* Semantic status: keep saturated colors, deepen the soft backgrounds */
  --allow-bg:  rgba(22, 163, 74, 0.18);
  --block-bg:  rgba(220, 38, 38, 0.18);
  --prompt-bg: rgba(217, 119, 6, 0.18);
  --info-bg:   rgba(37, 99, 235, 0.22);
  --allow:  #4ade80;
  --block:  #f87171;
  --prompt: #fbbf24;
  --info:   #60a5fa;
}
/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

:root {
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (px) */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;   /* app body default */
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;

  /* Weights */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:     700; /* @kind other */

  /* Line heights */
  --lh-tight: 1.2;  /* @kind other */
  --lh-snug:  1.35; /* @kind other */
  --lh-body:  1.5;  /* @kind other */

  /* Letter spacing */
  --ls-label: 0.04em;   /* uppercase section labels */
  --ls-tight: -0.01em;  /* large headings */
}
/* ==========================================================================
   SPACING — 4px base grid
   ========================================================================== */

:root {
  --space-0:  0;
  --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;

  /* Common component paddings */
  --pad-input:  10px 14px;
  --pad-card:   24px;
  --pad-tile:   20px;
  --gap-form:   16px;
}
/* ==========================================================================
   EFFECTS — radius, shadow, motion
   ========================================================================== */

:root {
  /* Corner radii */
  --radius-sm:   6px;
  --radius-md:   8px;    /* inputs, buttons */
  --radius-lg:   12px;   /* cards */
  --radius-xl:   16px;   /* outer panels */
  --radius-pill: 999px;  /* status badges */

  /* Shadows — soft, low-contrast */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur:      180ms;  /* @kind other */
}