/* =============================================================
   Adversarial Design System — colors_and_type.css
   Single source of truth for design tokens used by preview cards,
   UI kit components, and any HTML artifact we produce.

   Derived from megamind/src/app.css (@theme block) and
   megamind/src/lib/stories/Colors.mdx (canonical Tailwind mapping).
   ============================================================= */

/* -------- Fonts --------
   Roboto ships as brand-uploaded local static TTFs (6 weights × roman/italic).
   Source Code Pro is still pulled from Google Fonts until a local file lands. */

@font-face { font-family:'Roboto'; src:url('fonts/Roboto-Thin.ttf') format('truetype');         font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('fonts/Roboto-ThinItalic.ttf') format('truetype');   font-weight:100; font-style:italic; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('fonts/Roboto-Light.ttf') format('truetype');        font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('fonts/Roboto-LightItalic.ttf') format('truetype');  font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('fonts/Roboto-Regular.ttf') format('truetype');      font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('fonts/Roboto-Italic.ttf') format('truetype');       font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('fonts/Roboto-Medium.ttf') format('truetype');       font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('fonts/Roboto-MediumItalic.ttf') format('truetype'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('fonts/Roboto-Bold.ttf') format('truetype');         font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('fonts/Roboto-BoldItalic.ttf') format('truetype');   font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('fonts/Roboto-Black.ttf') format('truetype');        font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('fonts/Roboto-BlackItalic.ttf') format('truetype');  font-weight:900; font-style:italic; font-display:swap; }

@import url('/fonts/source-code-pro.css');

:root {
  /* ============ TYPOGRAPHY ============ */
  --font-primary: Roboto, ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-code:    'Source Code Pro', Menlo, Monaco, Consolas, 'Courier New', monospace;

  /* Type scale (tailwind defaults; 2xs is an adversarial addition) */
  --text-2xs: 0.625rem;   /* 10px — tiny table meta */
  --text-xs:  0.75rem;    /* 12px — chips, helper text */
  --text-sm:  0.875rem;   /* 14px — body / table cell */
  --text-base:1rem;       /* 16px */
  --text-lg:  1.125rem;   /* 18px */
  --text-xl:  1.25rem;    /* 20px */
  --text-2xl: 1.5rem;     /* 24px — page titles */
  --text-3xl: 1.875rem;   /* 30px — numbers/stats */

  --leading-tight:  1.2;
  --leading-normal: 1.5;

  /* Semantic text roles */
  --h1-size: 1.5rem;   --h1-weight: 700; --h1-leading: 1.25;
  --h2-size: 1.25rem;  --h2-weight: 700; --h2-leading: 1.3;
  --h3-size: 1.125rem; --h3-weight: 600; --h3-leading: 1.35;
  --h4-size: 1rem;     --h4-weight: 600; --h4-leading: 1.4;
  --p-size:  0.875rem; --p-weight:  400; --p-leading:  1.5;
  --small-size: 0.75rem;
  --code-size:  0.8125rem;

  /* ============ KEYSTONE COLOR — VIOLET ============ */
  --violet-50:  oklch(96.9% 0.016 293.756);
  --violet-100: oklch(94.3% 0.029 294.588);
  --violet-200: oklch(89.4% 0.057 293.283);
  --violet-300: oklch(81.1% 0.111 293.571);
  --violet-400: oklch(70.2% 0.183 293.541);
  --violet-500: oklch(60.6% 0.250 292.717);
  --violet-600: oklch(54.1% 0.281 293.009);
  --violet-700: oklch(49.1% 0.270 292.581); /* KEYSTONE */
  --violet-800: oklch(43.2% 0.232 292.759);
  --violet-900: oklch(38.0% 0.189 293.745);
  --violet-950: oklch(28.3% 0.141 291.089);

  /* ============ NEUTRAL — ZINC ============ */
  --zinc-50:  oklch(98.5% 0 0);
  --zinc-100: oklch(96.7% 0.001 286.375);
  --zinc-200: oklch(92.0% 0.004 286.32);
  --zinc-300: oklch(87.1% 0.006 286.286);
  --zinc-400: oklch(70.5% 0.015 286.067);
  --zinc-500: oklch(55.2% 0.016 285.938);
  --zinc-600: oklch(44.2% 0.017 285.786);
  --zinc-700: oklch(37.0% 0.013 285.805);
  --zinc-800: oklch(27.4% 0.006 286.033);
  --zinc-900: oklch(21.0% 0.006 285.885);
  --zinc-950: oklch(14.1% 0.005 285.823);

  /* ============ SEMANTIC ACCENTS ============ */
  --emerald-50:  oklch(97.9% 0.021 166.113);
  --emerald-100: oklch(95.0% 0.052 163.051);
  --emerald-200: oklch(90.5% 0.093 164.15);
  --emerald-500: oklch(69.6% 0.170 162.480);
  --emerald-600: oklch(59.6% 0.145 163.225); /* success */
  --emerald-700: oklch(50.8% 0.118 165.612);
  --emerald-800: oklch(43.2% 0.095 166.913);
  --emerald-900: oklch(37.8% 0.077 168.94);

  --red-50:  oklch(97.1% 0.013 17.380);
  --red-100: oklch(93.6% 0.032 17.717);
  --red-200: oklch(88.5% 0.062 18.334); /* toned destructive */
  --red-500: oklch(63.7% 0.237 25.331);
  --red-600: oklch(57.7% 0.245 27.325);
  --red-700: oklch(50.5% 0.213 27.518); /* destructive */
  --red-800: oklch(44.4% 0.177 26.899);

  --orange-500: oklch(70.5% 0.213 47.604);
  --orange-600: oklch(64.6% 0.222 41.116);
  --orange-700: oklch(55.3% 0.195 38.402); /* primary-orange #de5225 */

  --yellow-100: oklch(97.3% 0.071 103.193);
  --yellow-400: oklch(85.2% 0.199 91.936); /* primary-yellow #fad157 */

  --blue-600:  oklch(54.6% 0.245 262.881);
  --blue-700:  oklch(48.8% 0.243 264.376);

  /* ============ PRODUCT / LEGACY HEX (for chips & charts) ============ */
  --primary-white:  #ffffff;
  --primary-black:  #000000;
  --primary-orange: #de5225;   /* Brand orange (marketing, charts, non-text fills) */
  --sev-2-bg:       #ce4b11;   /* SEV-2 chip bg — brightest orange that clears AA 4.5 with white text (4.53) */
  --primary-yellow: #fad157;   /* SEV-3, Medium urgency bg */
  --primary-red:    #cf1c2a;   /* Critical urgency bg */
  --urgency-high:   #F5A623;   /* High urgency bg (black text: 9.5 AA) */
  --urgency-low:    #6F787B;   /* Low urgency bg (white text: 4.5 AA) */

  /* Threat constant colors (from src/lib/v2/constants.ts) */
  --threat-customer-targeting: #009A72;
  --threat-fraud:              #681BCF;
  --threat-extortion:          #CF1C2A;
  --threat-sabotage:           #F5A623;
  --threat-resource-hijack:    #5072CB;
  --threat-data-disclosure:    #FAD157;

  /* ============ SEMANTIC ROLES (the names artifacts should use) ============ */
  --bg-app:         var(--primary-white);
  --bg-surface:     var(--primary-white);
  --bg-muted:       var(--zinc-50);
  --bg-subtle:      var(--zinc-100);
  --bg-sidebar:     var(--zinc-900);

  --fg-default:     var(--primary-black);
  --fg-muted:       var(--zinc-600);
  --fg-subtle:      var(--zinc-500);
  --fg-disabled:    var(--zinc-400);
  --fg-on-primary:  var(--primary-white);
  --fg-on-dark:     var(--primary-white);
  --fg-link:        var(--violet-700);

  --border-default: var(--zinc-200);
  --border-strong:  var(--zinc-300);
  --border-focus:   var(--violet-700);

  --brand-primary:      var(--violet-700);
  --brand-primary-hover:var(--violet-800);
  --brand-primary-bg:   var(--violet-200);

  --fg-success: var(--emerald-700);
  --bg-success: var(--emerald-100);
  --fg-danger:  var(--red-700);
  --bg-danger:  var(--red-200);
  --fg-warning: #5C4500;       /* WCAG AA on yellow */
  --bg-warning: var(--primary-yellow);

  /* Scrollbar (matches app.html hardcoded value) */
  --scrollbar-thumb: #27574b;
  --scrollbar-thumb-hover: #002118;

  /* ============ SPACING / RADIUS / SHADOW ============ */
  --radius-xs:  2px;
  --radius-sm:  4px;  /* default for most inputs & chips */
  --radius-md:  6px;  /* cards */
  --radius-lg:  8px;
  --radius-full: 9999px;

  --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;

  --shadow-xs:  0 1px 1px rgba(0,0,0,0.08);                                  /* subtle 1px lift — buttons, inputs */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);       /* cards, table rows */
  --shadow-md:  0 2px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);       /* hover, dropdowns */
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.04);      /* popovers, drawers */
  --ring-focus: 0 0 0 2px var(--violet-200);
}

/* ============ SEMANTIC HELPERS ============
   Apply these classes / tags to get consistent typography. */

html, body { font-family: var(--font-primary); color: var(--fg-default); background: var(--bg-app); }

.h1, h1 { font: 700 var(--h1-size)/var(--h1-leading) var(--font-primary); letter-spacing: -0.01em; margin: 0; }
.h2, h2 { font: 700 var(--h2-size)/var(--h2-leading) var(--font-primary); margin: 0; }
.h3, h3 { font: 600 var(--h3-size)/var(--h3-leading) var(--font-primary); margin: 0; }
.h4, h4 { font: 600 var(--h4-size)/var(--h4-leading) var(--font-primary); margin: 0; }
.p,  p  { font: 400 var(--p-size)/var(--p-leading) var(--font-primary); margin: 0; }
.small  { font-size: var(--small-size); color: var(--fg-muted); }
.mono, code, pre, .code { font-family: var(--font-code); font-size: var(--code-size); }

/* Identifier / ID chip — use for risk IDs, threat IDs, hash ids, etc. */
.id-token {
  font-family: var(--font-code);
  font-size: var(--text-xs);
  letter-spacing: 0.01em;
  color: var(--fg-muted);
}