/* ============================================================================
   3D LAB — "FILAMENT" DESIGN LANGUAGE  ·  v2
   ----------------------------------------------------------------------------
   A technical-craft system for an additive-manufacturing brand. Warm paper +
   ink (no cold gray), a molten-orange hero accent (the heat of the extruder),
   a retained technical blue for data/links, and the recurring motif of FDM
   print layer-lines. Built on shadcn token structure: real color SCALES →
   semantic tokens, so it drops straight into a shadcn/Tailwind project.

   Load order in HTML:
     <link rel="stylesheet" href=".../design-language.css">
   All three families (Space Grotesk, IBM Plex Sans, IBM Plex Mono) are
   self-hosted from fonts/ — no CDN dependency. @imported below so the CSS is
   self-sufficient and works offline.
============================================================================ */

/* Self-hosted brand fonts — Space Grotesk, IBM Plex Sans (roman+italic), IBM Plex Mono */
@import url('fonts/fonts.css');

/* ============================ 1 · PRIMITIVES ===============================
   Raw color scales. Never reference these directly in product code — map them
   to semantic tokens (§2) and use those. Kept here so the system is auditable.
*/
:root {
  /* Ink — warm neutral (paper → near-black). Replaces cold gray. */
  --ink-50:  #F8F6F0;  /* paper           */
  --ink-100: #EFEBE0;
  --ink-200: #E2DCCC;  /* hairline border */
  --ink-300: #CCC4AF;
  --ink-400: #ABA28C;
  --ink-500: #847C69;
  --ink-600: #635C4D;  /* muted text      */
  --ink-700: #474237;
  --ink-800: #2B2820;
  --ink-900: #1B1913;  /* ink / fg        */
  --ink-950: #121009;

  /* Molten orange — primary accent (heated nozzle / hot end). */
  --orange-50:  #FDF2E9;
  --orange-100: #FBE1CD;
  --orange-200: #F6C09A;
  --orange-300: #F09C66;
  --orange-400: #EE7E3F;
  --orange-500: #EA5816;  /* PRIMARY */
  --orange-600: #D24811;
  --orange-700: #AE3911;
  --orange-800: #882F13;
  --orange-900: #6E2913;

  /* Technical blue — data, links, info (the thread to the old brand). */
  --blue-50:  #ECF1FF;
  --blue-100: #D6E1FF;
  --blue-300: #8FAAFF;
  --blue-500: #2B6CFF;
  --blue-600: #1E54D6;
  --blue-700: #1A43A8;

  /* Cyan-teal — support / chart. */
  --teal-500: #12A594;
  --teal-600: #0E8578;

  /* Warm semantics */
  --green-500: #3A8F5B;  --green-600: #2E7348;
  --amber-500: #C98A1B;  --amber-600: #A06E12;
  --brick-500: #C5412A;  --brick-600: #A23320;
}

/* ============================ 2 · SEMANTIC TOKENS ==========================
   shadcn-compatible names. THESE are what product code consumes.
*/
/* NOTE: semantic tokens use LITERAL hex (not var(--scale-n)) so they re-resolve
   cleanly on live theme switches. The primitive scales above remain the
   documented source — these literals mirror them. */
:root {
  --background:            #F8F6F0;  /* ink-50  */
  --foreground:            #1B1913;  /* ink-900 */
  --card:                  #FFFFFF;
  --card-foreground:       #1B1913;
  --popover:               #FFFFFF;
  --popover-foreground:    #1B1913;

  --primary:               #EA5816;  /* orange-500 */
  --primary-foreground:    #1B1913;  /* ink — dark-on-orange (AA 4.94:1; matches dark mode, reads as caution signage) */
  --secondary:             #EFEBE0;  /* ink-100 */
  --secondary-foreground:  #2B2820;  /* ink-800 */
  --muted:                 #EFEBE0;
  --muted-foreground:      #635C4D;  /* ink-600 */
  --accent:                #2B6CFF;  /* blue-500 — informational / links */
  --accent-foreground:     #FFFFFF;

  --success:               #3A8F5B;
  --success-foreground:    #FFFFFF;
  --warning:               #C98A1B;
  --warning-foreground:    #1B1913;
  --destructive:           #C5412A;
  --destructive-foreground:#FFFFFF;

  --border:                #E2DCCC;  /* ink-200 */
  --input:                 #E2DCCC;
  --ring:                  #EA5816;

  /* Data-viz */
  --chart-1: #EA5816;
  --chart-2: #2B6CFF;
  --chart-3: #12A594;
  --chart-4: #C98A1B;
  --chart-5: #474237;

  /* Motif tints */
  --layer-line: rgba(27, 25, 19, 0.06);   /* FDM layer striations  */
  --grid-line:  rgba(27, 25, 19, 0.05);   /* blueprint grid        */
  --tick:       #CCC4AF;                   /* engineering corner ticks */

  color-scheme: light;
}

.dark, :root[data-theme="dark"] {
  --background:            #15130D;  /* warm charcoal, not gray */
  --foreground:            #F1EDE2;
  --card:                  #1E1B14;
  --card-foreground:       #F1EDE2;
  --popover:               #211E16;
  --popover-foreground:    #F1EDE2;

  --primary:               #F2682B;  /* orange lifts on dark */
  --primary-foreground:    #1B1006;
  --secondary:             #2A2619;
  --secondary-foreground:  #E7E1D2;
  --muted:                 #262318;
  --muted-foreground:      #A49C88;
  --accent:                #5C8BFF;
  --accent-foreground:     #0A1430;

  --success:               #4FA873;
  --warning:               #E0A434;
  --destructive:           #DD5A40;

  --border:                #322E22;
  --input:                 #322E22;
  --ring:                  #F2682B;

  --layer-line: rgba(241, 237, 226, 0.07);
  --grid-line:  rgba(241, 237, 226, 0.05);
  --tick:       #4A4534;
  color-scheme: dark;
}

/* ============================ 3 · TYPOGRAPHY ==============================*/
:root {
  --font-display: 'Space Grotesk', system-ui, sans-serif;       /* headings, numerals */
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, sans-serif; /* body / UI */
  --font-mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;       /* data / labels */

  /* Type scale (rem @16px). Display uses Space Grotesk + tight tracking. */
  --fs-display: clamp(2.75rem, 6vw, 4.5rem);
  --fs-h1: 2.5rem;   --fs-h2: 1.875rem; --fs-h3: 1.375rem; --fs-h4: 1.125rem;
  --fs-lead: 1.25rem;
  --fs-body: 1rem;   --fs-sm: 0.875rem; --fs-xs: 0.75rem;
  --tracking-display: -0.03em;
  --tracking-tight:   -0.01em;
  --tracking-label:   0.14em;   /* mono eyebrows / technical labels */

  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.55; --leading-relaxed: 1.7;
}

/* ============================ 4 · GEOMETRY ===============================
   Sharp / technical. shadcn --radius tuned down for an engineering feel.
*/
:root {
  --radius: 0.25rem;                 /* 4px base */
  --radius-sm: 0.125rem;             /* 2px */
  --radius-md: 0.25rem;              /* 4px */
  --radius-lg: 0.375rem;             /* 6px */
  --radius-xl: 0.5rem;               /* 8px — large surfaces only */
  --radius-pill: 9999px;

  /* Spacing (4px base) */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;

  /* Elevation — low, crisp, slightly warm. Used sparingly. */
  --shadow-xs: 0 1px 2px rgba(27,25,19,.06);
  --shadow-sm: 0 1px 3px rgba(27,25,19,.08), 0 1px 2px rgba(27,25,19,.04);
  --shadow-md: 0 4px 10px -2px rgba(27,25,19,.10), 0 2px 4px -2px rgba(27,25,19,.06);
  --shadow-lg: 0 12px 28px -6px rgba(27,25,19,.16);
  --shadow-primary: 0 6px 18px -4px rgba(234,88,22,.40); /* glow under primary CTA */

  --container: 1120px;
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur-fast: .14s; --dur: .22s; --dur-slow: .4s;
}

/* ============================ 5 · ELEMENT DEFAULTS =======================*/
* { box-sizing: border-box; }

/* Theme-switch guard. Chromium leaves var()-derived color/background/border
   stuck at the pre-toggle value on elements that are mid-transition when the
   theme flips. Toggle handlers add `.theme-switching` to <html> for one frame
   (flip data-theme, then remove after a double rAF) so nothing transitions
   across the switch. Call window.toggleTheme() from any theme button. */
html.theme-switching, html.theme-switching * {
  transition: none !important;
}

body {
  margin: 0; background: var(--background); color: var(--foreground);
  font-family: var(--font-sans); font-size: var(--fs-body);
  line-height: var(--leading-normal); -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv05";
}
h1,h2,h3,h4 { font-family: var(--font-display); color: var(--foreground);
  letter-spacing: var(--tracking-tight); line-height: var(--leading-tight);
  margin: 0; font-weight: var(--weight-semibold); }
h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); }
p { margin: 0; color: var(--muted-foreground); line-height: var(--leading-relaxed); }
a { color: var(--accent); text-decoration: none; }
code, kbd, pre, samp { font-family: var(--font-mono); }

/* ============================ 6 · MOTIF UTILITIES ========================
   The signature devices. Compose these onto surfaces.
*/
/* FDM print layer-lines — horizontal striations. */
.layer-lines {
  background-image: repeating-linear-gradient(
    0deg, var(--layer-line) 0, var(--layer-line) 1px,
    transparent 1px, transparent 6px);
}
/* Blueprint grid. */
.blueprint-grid {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
}
/* Mono technical label — eyebrow with a leading slash-slash. */
.tech-label {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--muted-foreground); font-weight: var(--weight-medium);
}
.tech-label::before { content: "// "; color: var(--primary); }

/* Engineering corner-ticks — wrap any boxed element. */
.ticked { position: relative; }
.ticked::before, .ticked::after {
  content: ""; position: absolute; width: 7px; height: 7px; pointer-events: none;
}
.ticked::before { top: -1px; left: -1px; border-top: 1.5px solid var(--tick); border-left: 1.5px solid var(--tick); }
.ticked::after  { bottom: -1px; right: -1px; border-bottom: 1.5px solid var(--tick); border-right: 1.5px solid var(--tick); }

/* Accent rule — a short molten underline under a heading. */
.accent-rule { display:inline-block; width:48px; height:3px; background: var(--primary); border-radius: 2px; }