/* ============================================================================
   In Flux Studio — Design tokens
   Source of truth distilled from influxstudio/src/styles/measured-light.css
   and measured-font.css. Mirrors the engineering CSS one-to-one so anything
   built from this file drops back into the product unchanged.
   ============================================================================ */

/* ---- Fonts ---------------------------------------------------------------- */

/* Noto Sans (variable) — full 100–900 + italic variant */
@font-face {
  font-family: 'Noto Sans';
  src: url('fonts/NotoSans-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans';
  src: url('fonts/NotoSans-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Inter (variable) — secondary UI alt */
@font-face {
  font-family: 'Inter';
  src: url('fonts/InterVariable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Courier Prime — monospace, all four cuts */
@font-face {
  font-family: 'Courier Prime';
  src: url('fonts/CourierPrime-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url('fonts/CourierPrime-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url('fonts/CourierPrime-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url('fonts/CourierPrime-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* Limelight — poster / display, never product chrome */
@font-face {
  font-family: 'Limelight';
  src: url('fonts/Limelight-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* IFS "default" face — the in-app fallback that ships with src/fonts/default.ttf.
   Used by the asset preview system when an asset references a font that isn't
   uploaded yet. Don't reach for it in chrome — Noto Sans is the chrome face. */
@font-face {
  font-family: 'IFS Default';
  src: url('fonts/default.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- Color tokens — Light theme (default) -------------------------------- */
:root {
  /* Logo — monochrome in light mode */
  --logo-c1: #101010;
  --logo-c2: #101010;
  --logo-c3: #101010;

  /* IFS palette — centralized L/C, 5 hues */
  --palette-l: 0.84;
  --palette-c: 0.07;

  --h1: 233;  /* blue   — videos */
  --h2: 185;  /* aqua   — audio + primary action */
  --h3: 151;  /* green  — edits */
  --h4: 45;   /* yellow — fonts / warnings */
  --h5: 300;  /* magenta— images / overrides */

  --c1: oklch(var(--palette-l) var(--palette-c) var(--h1));
  --c2: oklch(var(--palette-l) var(--palette-c) var(--h2));
  --c3: oklch(var(--palette-l) var(--palette-c) var(--h3));
  --c4: oklch(var(--palette-l) var(--palette-c) var(--h4));
  --c5: oklch(var(--palette-l) var(--palette-c) var(--h5));

  /* Tag/filter color system */
  --tag-l-on:  var(--palette-l);
  --tag-c-on:  var(--palette-c);
  --tag-l-off: 0.88;
  --tag-c-off: 0.05;

  /* Figure — foreground text & icons */
  --figure:          #101010;
  --figure-subtle:   #696969;
  --figure-override: var(--figure);
  --figure-danger:   var(--ground);
  --figure-focus:    var(--figure);
  --figure-hover:    var(--c1);
  --figure-negative: var(--figure);
  --figure-positive: var(--figure);
  --figure-selected: var(--figure);
  --figure-warning:  var(--figure-negative);
  --figure-error:    var(--figure-negative);

  /* Graphic — borders, dividers, separator lines */
  --graphic:          #878787;
  --graphic-focus:    var(--figure);
  --graphic-hover:    var(--c1);
  --graphic-selected: var(--c1);
  --graphic-error:    var(--c4);

  /* Section / ground — the two background layers */
  --section: #ebebeb;
  --acrylic: rgba(255, 255, 255, 0.8);

  --ground:          #f5f5f5;
  --ground-negative: var(--c4);
  --ground-positive: var(--c3);
  --ground-error:    var(--ground-negative);
  --ground-focus:    var(--ground);
  --ground-hover:    var(--figure);
  --ground-override: var(--c5);
  --ground-selected: var(--c1);
  --ground-warning:  var(--ground-negative);

  --shadow-color: var(--ground);

  --ground-danger: repeating-linear-gradient(
    45deg,
    var(--c4) 0px, var(--c4) 1rem,
    var(--section) 1rem, var(--section) 2rem
  );

  /* Layout */
  --nav-height: 3rem;
  --toolbar-offset: 0.5rem;
  --transition-duration: 0.2s;
  --transition-easing: ease-out;

  /* ---- Type scale (mirrors measured-light.css element rules) ------------ */
  --font-family-sans: 'Noto Sans', system-ui, sans-serif;
  --font-family-mono: 'Courier Prime', ui-monospace, monospace;
  --font-family-display: 'Limelight', 'Noto Sans', serif;

  /* Sizes — rem-first, Fibonacci-friendly */
  --font-size-h1:       1.5rem;     /* 24px */
  --font-size-h2:       1rem;       /* 16px */
  --font-size-h3:       1rem;
  --font-size-body:     1rem;
  --font-size-small:    0.8rem;
  --font-size-tiny:     0.618rem;   /* golden inverse */
  --line-height-base:   1.5rem;

  /* Weights */
  --font-weight-thin:       100;
  --font-weight-extralight: 200;
  --font-weight-light:      300;
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;
  --font-weight-black:      900;

  /* Radii / borders / spacing scale (from measured-light + util.css) */
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.3rem;   /* dominant — buttons, inputs, chips */
  --radius-lg: 0.5rem;   /* cards, panels, dialogs */
  --radius-pill: 999rem;

  --border-thin: 0.1rem;     /* the entire app uses 0.1rem solid var(--graphic) */
  --border-thick: 0.2rem;

  --shadow-card:    0 0.125rem 0.25rem rgba(0,0,0,0.1);
  --shadow-lifted:  0 0.25rem 0.5rem var(--shadow-color);
  --shadow-floating: 0 0.5rem 1rem var(--shadow-color);
  --shadow-deep:    0 0.5rem 2rem var(--shadow-color);
  --shadow-glow-selected: 0 0 1rem var(--ground-selected);

  /* Spacing — half-rem ladder, used pervasively */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Tap-target floor — every interactive control respects this */
  --tap-target: 44px;
}

/* ---- Dark theme — applied via .theme-dark on <html> --------------------- */
.theme-dark {
  --logo-c1: oklch(0.75 0.12 var(--h1));
  --logo-c2: oklch(0.75 0.12 var(--h2));
  --logo-c3: oklch(0.75 0.12 var(--h3));

  --palette-l: 0.4;
  --palette-c: 0.07;

  --c1: oklch(var(--palette-l) var(--palette-c) var(--h1));
  --c2: oklch(var(--palette-l) var(--palette-c) var(--h2));
  --c3: oklch(var(--palette-l) var(--palette-c) var(--h3));
  --c4: oklch(var(--palette-l) var(--palette-c) var(--h4));
  --c5: oklch(var(--palette-l) var(--palette-c) var(--h5));

  --tag-l-on:  var(--palette-l);
  --tag-c-on:  var(--palette-c);
  --tag-l-off: 0.25;
  --tag-c-off: 0.04;

  --figure:        #ebebeb;
  --figure-subtle: #959595;
  --graphic:       #4c4c4c;
  --section:       #2e2e2e;
  --acrylic:       rgba(0, 0, 0, 0.8);
  --ground:        #101010;
}

/* ---- Logo SVG color classes (used by .ifs-logo svg) --------------------- */
.ifs-logo__c1 { fill: var(--logo-c1); }
.ifs-logo__c2 { fill: var(--logo-c2); }
.ifs-logo__c3 { fill: var(--logo-c3); }

/* ---- Semantic element styles -------------------------------------------- */

html {
  color: var(--figure);
  background-color: var(--ground);
  font-size: 1rem;
  line-height: var(--line-height-base);
}

body {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  margin: 0;
  padding: 0.5rem;
}

/* Headings — Noto Sans Light. h2 is the exception: weight 600 (bold). */
h1, h3, h4, h5, h6, label {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-light);
  font-optical-sizing: auto;
}
h1 { font-size: var(--font-size-h1); color: var(--figure); }
h2 { font-family: var(--font-family-sans); font-weight: var(--font-weight-semibold); font-size: var(--font-size-h2); color: var(--figure); }
h3 { font-size: var(--font-size-h3); font-style: italic; color: var(--figure); }
h4 { color: var(--figure-subtle); }
h5 { font-size: var(--font-size-tiny); color: var(--figure); }

/* Body text */
p, dd, li, button, select, tr, th, table {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
}
p { color: var(--figure); margin: 0; max-width: 55ch; }

/* Subtle metadata */
small, dt {
  color: var(--figure-subtle);
  font-size: var(--font-size-small);
}

/* Monospace — Courier Prime */
code, kbd, samp, pre, .monospace {
  font-family: var(--font-family-mono);
}

/* Bold / emphasis */
strong { font-weight: var(--font-weight-bold); }
em, output, blockquote { font-style: italic; }

/* Links — underlined in --graphic, hover to --c1 */
a {
  color: var(--figure);
  text-decoration: underline solid var(--graphic) 0.1rem;
  text-underline-offset: 0.3rem;
}
a:hover { color: var(--figure-hover); }

/* ---- Utility classes ----------------------------------------------------- */
.font-thin       { font-weight: var(--font-weight-thin); }
.font-extralight { font-weight: var(--font-weight-extralight); }
.font-light      { font-weight: var(--font-weight-light); }
.font-regular    { font-weight: var(--font-weight-regular); }
.font-medium     { font-weight: var(--font-weight-medium); }
.font-semibold   { font-weight: var(--font-weight-semibold); }
.font-bold       { font-weight: var(--font-weight-bold); }
.font-extrabold  { font-weight: var(--font-weight-extrabold); }
.font-black      { font-weight: var(--font-weight-black); }

.subtle { color: var(--figure-subtle); }
.error  { color: var(--figure-error); }