/* ============================================================
   InspektLABS — Design Tokens
   Forensic / field-instrument system.
   Light theme = customer app (sunlight-legible).
   [data-theme="admin"] = dark instrument-cluster (operations).
   ============================================================ */

:root {
  /* --- Brand & neutrals (light) --- */
  --paper:      #E9EDF1;   /* backdrop behind the phone column */
  --bg:         #F6F8FA;   /* screen background */
  --surface:    #FFFFFF;
  --surface-2:  #F3F6F8;   /* insets / subtle fills */
  --surface-3:  #ECF0F3;

  --ink:        #0F141A;   /* primary text + primary buttons */
  --ink-2:      #58626E;   /* secondary text */
  --ink-3:      #8A95A1;   /* tertiary / placeholder */
  --on-ink:     #FFFFFF;   /* text on ink buttons */

  --line:       #E4E8EC;   /* hairlines */
  --line-2:     #D2D9DF;   /* stronger dividers, inputs */

  --brand:      #0C6B74;   /* teal — links, accents, the evidence frame */
  --brand-strong:#0A565E;
  --brand-tint: #E5F0F1;
  --brand-ink:  #07454C;   /* text on brand-tint */

  --rec:        #E5484D;   /* recording / destructive */
  --rec-tint:   #FCEBEC;
  --rec-ink:    #B42318;
  --ok:         #0E7A53;   /* verified / success / secured */
  --ok-tint:    #E4F4EC;
  --ok-ink:     #0A5D3F;
  --warn-ink:   #94600A;   /* attention text (amber, AA on tint) */
  --warn-tint:  #FBF0D8;
  --warn-line:  #ECCF8C;

  --focus:      #0E8F9E;   /* focus ring */

  /* --- Radii --- */
  --r-xs: 6px; --r-sm: 9px; --r: 13px; --r-lg: 17px; --r-xl: 22px; --r-2xl: 28px;
  --r-pill: 999px;

  /* --- Spacing scale (4px base) --- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px;

  /* --- Shadows --- */
  --shadow-1: 0 1px 2px rgba(16,20,26,.05), 0 1px 1px rgba(16,20,26,.04);
  --shadow-2: 0 6px 20px rgba(16,20,26,.08), 0 1px 3px rgba(16,20,26,.05);
  --shadow-3: 0 14px 44px rgba(16,20,26,.16);
  --shadow-pop: 0 -10px 40px rgba(16,20,26,.10);
  --ring: 0 0 0 3px color-mix(in srgb, var(--focus) 34%, transparent);

  /* --- Type --- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-display-xl: 30px; --t-display: 24px;
  --t-h1: 20px; --t-h2: 17px; --t-h3: 15px;
  --t-body: 15px; --t-sm: 13.5px; --t-xs: 12px; --t-2xs: 10.5px;
  --lh-tight: 1.12; --lh-snug: 1.32; --lh: 1.5;

  /* --- Layout --- */
  --app-w: 440px;          /* mobile column width */
  --appbar-h: 56px;
  --tap: 48px;             /* minimum touch target */
  --maxw-read: 720px;

  /* --- Motion --- */
  --ease: cubic-bezier(.2,.7,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1: .14s; --dur-2: .24s; --dur-3: .4s;

  color-scheme: light;
}

/* ============================================================
   ADMIN — dark instrument cluster
   ============================================================ */
[data-theme="admin"] {
  --paper:      #05080B;
  --bg:         #0B0F14;
  --surface:    #121821;
  --surface-2:  #0E141B;
  --surface-3:  #161E29;

  --ink:        #E9EFF5;
  --ink-2:      #93A1B0;
  --ink-3:      #61707E;
  --on-ink:     #05080B;

  --line:       #1E2731;
  --line-2:     #2B3540;

  --brand:      #2BD4CB;   /* bright teal LED */
  --brand-strong:#5FE3DB;
  --brand-tint: #0F262B;
  --brand-ink:  #74E9E1;

  --rec:        #FF5C60;
  --rec-tint:   #2A1517;
  --rec-ink:    #FF8A8D;
  --ok:         #35D399;
  --ok-tint:    #0E2A20;
  --ok-ink:     #5FE0B0;
  --warn-ink:   #F6BE54;
  --warn-tint:  #2B2210;
  --warn-line:  #5A4A23;

  --focus:      #35D399;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 26px rgba(0,0,0,.45);
  --shadow-3: 0 18px 50px rgba(0,0,0,.6);
  --shadow-pop: 0 -10px 40px rgba(0,0,0,.5);

  color-scheme: dark;
}