/* Filasophy brand tokens — vendored 2026-09-23 from the Filasophy Design System
   (claude.ai/design project 729ea156-d3e3-44d8-81df-2c6d276e6bd7). Token values are verbatim;
   Thai support (Prompt + :lang(th) metrics) is upstream as of the same date. Local changes only:
   --texture-hex points at this folder, color-scheme/accent-color set. */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Prompt:wght@400;500;600;700;800&display=swap");

:root{
/* ---- Brand ramp: pulled from the filament ribbon in the logomark ---- */
--brand-cyan-light:#7FE6F2;
--brand-cyan:#3ED0E6;
--brand-teal:#28A6C6;
--brand-blue:#3F6FD8;
--brand-violet:#7B4FD3;
--brand-orchid:#A85FDD;
--brand-magenta:#D06FD6;

/* ---- Signature gradients ---- */
--grad-filament:linear-gradient(115deg,#3ED0E6 0%,#7B4FD3 52%,#D06FD6 100%);
--grad-filament-soft:linear-gradient(115deg,rgba(62,208,230,.22) 0%,rgba(123,79,211,.22) 52%,rgba(208,111,214,.22) 100%);
--grad-spool:conic-gradient(from 210deg,#3ED0E6,#7B4FD3,#D06FD6,#3ED0E6);
--grad-ink:linear-gradient(180deg,#12102A 0%,#0A0918 100%);

/* ---- Ink / neutral ramp (violet-cooled, dark-first) ---- */
--ink-950:#06050F;
--ink-900:#0A0918;
--ink-850:#0E0C1F;
--ink-800:#14122A;
--ink-700:#1D1A38;
--ink-600:#2A2650;
--ink-500:#3D3869;
--ink-400:#5C5687;
--ink-300:#8C86AE;
--ink-200:#B9B4D0;
--ink-100:#DEDBEA;
--ink-050:#F1EFF7;
--white:#FFFFFF;

/* ---- Semantic status ---- */
--success:#34C79A;
--success-ink:#0C3B2E;
--warning:#F2A93B;
--warning-ink:#3D2708;
--danger:#F0596B;
--danger-ink:#3E0D14;
--info:#3ED0E6;
--info-ink:#07303A;

/* ---- Material chips (filament families keep fixed hues everywhere) ---- */
--mat-pla:#3ED0E6;
--mat-petg:#34C79A;
--mat-abs:#F2A93B;
--mat-asa:#F0596B;
--mat-tpu:#A85FDD;
--mat-nylon:#7FA0F0;
--mat-cf:#8C86AE;

/* ---- Semantic aliases: surfaces ---- */
--surface-page:var(--ink-900);
--surface-raised:var(--ink-850);
--surface-card:var(--ink-800);
--surface-inset:var(--ink-950);
--surface-hover:var(--ink-700);
--surface-paper:var(--ink-050);
--surface-overlay:rgba(6,5,15,.72);

/* ---- Semantic aliases: text ---- */
--text-hero:var(--white);
--text-body:var(--ink-100);
--text-muted:var(--ink-300);
--text-faint:var(--ink-400);
--text-accent:var(--brand-cyan);
--text-on-accent:var(--ink-950);
--text-on-paper:var(--ink-900);
--text-on-paper-muted:var(--ink-500);

/* ---- Semantic aliases: lines & controls ---- */
--border-hairline:rgba(185,180,208,.14);
--border-strong:rgba(185,180,208,.28);
--border-accent:rgba(62,208,230,.55);
--border-paper:rgba(10,9,24,.12);
--focus-ring:rgba(62,208,230,.55);
--control-fill:var(--ink-700);
--control-fill-hover:var(--ink-600);
--link:var(--brand-cyan);
--link-hover:var(--brand-cyan-light);
}

:root{
/* Latin face first; Prompt catches every Thai character */
--font-thai:"Prompt","Noto Sans Thai",sans-serif;
--font-display:"Sora","Prompt","Noto Sans Thai","Segoe UI",system-ui,sans-serif;
--font-body:"Manrope","Prompt","Noto Sans Thai","Segoe UI",system-ui,sans-serif;
--font-mono:"JetBrains Mono","Prompt","Noto Sans Thai",ui-monospace,"SF Mono",monospace;

--fs-display-1:64px;
--fs-display-2:48px;
--fs-h1:36px;
--fs-h2:28px;
--fs-h3:22px;
--fs-h4:18px;
--fs-body-lg:17px;
--fs-body:15px;
--fs-body-sm:13px;
--fs-caption:12px;
--fs-micro:11px;

--lh-tight:1.05;
--lh-snug:1.2;
--lh-normal:1.5;
--lh-loose:1.65;

--fw-regular:400;
--fw-medium:500;
--fw-semibold:600;
--fw-bold:700;
--fw-black:800;

--tracking-mark:.16em;
--tracking-eyebrow:.14em;
--tracking-tight:-.02em;
--tracking-normal:0;

--text-eyebrow-size:var(--fs-micro);
--text-spec-size:var(--fs-body-sm);
}

/* Thai metrics: looser leading so tone marks never clip; no tracking on Thai clusters. */
:lang(th){
--lh-tight:1.3;
--lh-snug:1.4;
--lh-normal:1.7;
--lh-loose:1.85;
--tracking-tight:0;
--tracking-mark:.02em;
--tracking-eyebrow:.02em;
}

:root{
--space-0:0px;
--space-1:2px;
--space-2:4px;
--space-3:8px;
--space-4:12px;
--space-5:16px;
--space-6:20px;
--space-7:24px;
--space-8:32px;
--space-9:40px;
--space-10:48px;
--space-11:64px;
--space-12:80px;
--space-13:96px;
--space-14:128px;

--radius-xs:4px;
--radius-sm:8px;
--radius-md:12px;
--radius-lg:16px;
--radius-xl:24px;
--radius-2xl:32px;
--radius-pill:999px;

--border-width:1px;
--border-width-thick:2px;

--container-max:1240px;
--container-narrow:720px;
--gutter:24px;
--section-y:96px;
--card-pad:20px;
--control-h-sm:32px;
--control-h:40px;
--control-h-lg:48px;
}

:root{
/* dark-first: depth comes from glow + hairline, not heavy drop shadow */
--shadow-sm:0 1px 2px rgba(6,5,15,.6);
--shadow-md:0 8px 24px -8px rgba(6,5,15,.7);
--shadow-lg:0 24px 60px -20px rgba(6,5,15,.85);
--shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.06);
--glow-cyan:0 0 0 1px rgba(62,208,230,.35),0 8px 32px -8px rgba(62,208,230,.35);
--glow-violet:0 0 0 1px rgba(168,95,221,.35),0 8px 32px -8px rgba(123,79,211,.4);
--ring-focus:0 0 0 3px rgba(62,208,230,.35);

--blur-panel:blur(18px);
--blur-scrim:blur(6px);

/* fix2 (tool-forge T6 live bug): absolute, not relative to this stylesheet — a var() consumer
   (apps/name-tag/src/main.css's #stage::before) resolves url() against ITS OWN stylesheet's
   location, not filasophy.css's, so a relative path 404'd as /name-tag/texture-hex-dark.png on
   live. Deviates from the upstream Filasophy design-system source on purpose; do not overwrite
   this back to a relative path on the next design-system sync. */
--texture-hex:url("/brand/texture-hex-dark.png");
--scrim-bottom:linear-gradient(180deg,rgba(6,5,15,0) 0%,rgba(6,5,15,.92) 100%);
--scrim-top:linear-gradient(180deg,rgba(6,5,15,.85) 0%,rgba(6,5,15,0) 100%);
}

:root{
--dur-instant:80ms;
--dur-fast:140ms;
--dur-base:220ms;
--dur-slow:420ms;
--dur-spool:1400ms;
--ease-standard:cubic-bezier(.2,.7,.3,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--ease-in:cubic-bezier(.5,0,1,.5);
--ease-extrude:cubic-bezier(.65,0,.35,1);
--lift-hover:translateY(-2px);
--press-scale:scale(.985);
}

:root{color-scheme:dark}
input,select{accent-color:var(--brand-cyan)}

/* ---- base.css (verbatim) ---- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-normal);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-hero);margin:0;line-height:var(--lh-snug);letter-spacing:var(--tracking-tight)}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:var(--radius-sm)}
::selection{background:rgba(123,79,211,.45);color:#fff}
.fs-eyebrow{font-family:var(--font-display);font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.fs-spec{font-family:var(--font-mono);font-size:var(--fs-body-sm);letter-spacing:.01em}
.fs-gradient-text{background:var(--grad-filament);-webkit-background-clip:text;background-clip:text;color:transparent}
.fs-hex-bg{background-color:var(--ink-900);background-image:var(--texture-hex);background-size:400px auto}
:lang(th) .fs-eyebrow{font-size:var(--fs-caption);font-weight:var(--fw-semibold)}
:lang(th) body,body:lang(th){text-wrap:wrap;line-break:strict}