/* ==========================================================================
   Creatium Design System — Colors & Typography
   Source of truth: Creatium Studio Design System (Figma)
   ========================================================================== */

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

@font-face {
  font-family: "Suisse Int'l";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("./fonts/SuisseIntl-Thin.woff2") format("woff2");
}
@font-face {
  font-family: "Suisse Int'l";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("./fonts/SuisseIntl-Light.woff2") format("woff2");
}
/* Book ≈ 350 — Creatium uses it heavily for body copy */
@font-face {
  font-family: "Suisse Int'l";
  font-style: normal;
  font-weight: 350;
  font-display: swap;
  src: url("./fonts/SuisseIntl-Book.woff2") format("woff2");
}
@font-face {
  font-family: "Suisse Int'l";
  font-style: italic;
  font-weight: 350;
  font-display: swap;
  src: url("./fonts/SuisseIntl-BookIt.woff2") format("woff2");
}
@font-face {
  font-family: "Suisse Int'l";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/SuisseIntl-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Suisse Int'l";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/SuisseIntl-RegularIt.woff2") format("woff2");
}
@font-face {
  font-family: "Suisse Int'l";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/SuisseIntl-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Suisse Int'l";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/SuisseIntl-MediumIt.woff2") format("woff2");
}
@font-face {
  font-family: "Suisse Int'l";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/SuisseIntl-Semibold.woff2") format("woff2");
}
@font-face {
  font-family: "Suisse Int'l";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/SuisseIntl-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Suisse Int'l";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/SuisseIntl-BoldIt.woff2") format("woff2");
}
@font-face {
  font-family: "Suisse Int'l";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("./fonts/SuisseIntl-Black.woff2") format("woff2");
}

:root {
  /* ---------- Brand colors ----------
     Creatium's palette is quiet and earthy: a deep petrol-teal paired with
     warm cream-paper surfaces, highlighted by a mustard gold and muted terracotta.
     Nothing is ever fully-saturated or pure white — every surface is tinted. */

  /* Primary — Petrol / Deep teal. The "Creatium dark". */
  --c-petrol-900: rgb(23, 53, 64);      /* Nav surface, dark mode BG */
  --c-petrol-800: rgb(37, 79, 89);      /* Primary brand — buttons, labels, logo wordmark */
  --c-petrol-700: rgb(47, 89, 100);     /* Hover variant */
  --c-petrol-500: rgb(61, 127, 143);    /* Accent / focused / active toggle */
  --c-petrol-300: rgb(135, 178, 188);   /* Soft petrol — illustrations, decorative waves */
  --c-petrol-200: rgb(168, 196, 203);   /* Focus rings, borders */
  --c-petrol-100: rgb(220, 231, 234);   /* Pale petrol — chip tints */
  --c-petrol-050: rgb(234, 243, 246);   /* Info tint */

  /* Surface — Warm cream "paper" tones. These are THE backgrounds. */
  --c-cream-white: rgb(254, 251, 246);   /* Neomorphic light highlight */
  --c-cream-50:    rgb(247, 243, 235);   /* Default page BG */
  --c-cream-100:   rgb(240, 235, 228);   /* Raised surfaces, toggle track */
  --c-cream-200:   rgb(230, 223, 209);   /* Hairline borders */
  --c-cream-300:   rgb(214, 204, 184);   /* Neomorphic dark shadow */
  --c-cream-400:   rgb(230, 216, 181);   /* Subtle warm tint */

  /* Accent — Mustard gold (from logo) + terracotta warmth */
  --c-gold-600:    rgb(154, 116,  18);   /* Warning text / gold accent text */
  --c-gold-500:    rgb(230, 200, 107);   /* Logo mustard */
  --c-terra-600:   rgb(198,  90,  66);   /* Terracotta accent / error-adjacent */
  --c-terra-500:   rgb(225, 117,  90);   /* Softer terracotta */
  --c-olive-600:   rgb( 90, 106,  58);   /* Success green-olive */

  /* Neutrals — warm greys, never pure */
  --c-ink-900:     rgb( 26,  26,  26);   /* Primary text */
  --c-ink-800:     rgb( 44,  44,  42);   /* Display text */
  --c-ink-700:     rgb( 43,  43,  43);   /* Dark chip */
  --c-ink-600:     rgb( 80,  80,  80);   /* Secondary text */
  --c-ink-500:     rgb( 92,  92,  92);   /* Labels, helper text */
  --c-ink-400:     rgb(122, 122, 122);   /* Placeholder / tertiary */
  --c-ink-300:     rgb(160, 160, 160);   /* Disabled */
  --c-ink-200:     rgb(199, 199, 199);   /* Hairline on dark */
  --c-ink-100:     rgb(238, 238, 238);

  --c-white:       rgb(255, 255, 255);

  /* ---------- Semantic roles ---------- */

  /* Backgrounds */
  --bg-app:        var(--c-cream-50);    /* The canvas — warm paper */
  --bg-surface:    var(--c-white);       /* Elevated surface inside card */
  --bg-raised:     var(--c-cream-100);   /* Slightly raised from app bg */
  --bg-inverse:    var(--c-petrol-900);  /* Nav / dark mode */
  --bg-primary:    var(--c-petrol-800);  /* Solid brand surface */

  /* Foreground / text */
  --fg-primary:    var(--c-ink-900);
  --fg-secondary:  var(--c-ink-600);
  --fg-tertiary:   var(--c-ink-400);
  --fg-disabled:   var(--c-ink-300);
  --fg-inverse:    var(--c-white);
  --fg-inverse-2:  rgba(255,255,255,0.72);
  --fg-brand:      var(--c-petrol-800);
  --fg-on-brand:   var(--c-white);

  /* Borders */
  --border-subtle: var(--c-cream-200);
  --border-default: var(--c-cream-300);
  --border-focus:  var(--c-petrol-500);
  --border-success: var(--c-olive-600);
  --border-error:  var(--c-terra-600);
  --border-info:   var(--c-petrol-500);
  --border-warning: var(--c-gold-600);

  /* Status */
  --success-fg:    var(--c-olive-600);
  --success-bg:    rgb(236, 240, 225);
  --error-fg:      var(--c-terra-600);
  --error-bg:      rgb(249, 232, 228);
  --warning-fg:    var(--c-gold-600);
  --warning-bg:    rgb(249, 241, 218);
  --info-fg:       var(--c-petrol-500);
  --info-bg:       var(--c-petrol-050);

  /* ---------- Shadows (neomorphic) ----------
     Creatium's signature elevation: a dual shadow — warm highlight
     on the top-left, warm-beige shadow on the bottom-right —
     that makes surfaces feel extruded from the cream paper. */
  --shadow-raised:
    5px 5px 12px 0 var(--c-cream-300),
    -5px -5px 12px 0 var(--c-cream-white);

  --shadow-raised-sm:
    3px 3px 8px 0 var(--c-cream-300),
    -3px -3px 8px 0 var(--c-cream-white);

  /* Inset "pressed into the paper" treatment — used for inputs & tracks */
  --shadow-inset-input:
    inset -3px -3px 6px 0 var(--c-white),
    inset 3px 3px 7px 0 var(--c-cream-300);

  /* Plain drop for floaters (menus, tooltips) */
  --shadow-float:
    0 8px 24px -6px rgba(23, 53, 64, 0.16),
    0 2px 6px -2px rgba(23, 53, 64, 0.08);

  --shadow-float-lg:
    0 18px 40px -10px rgba(23, 53, 64, 0.22),
    0 4px 12px -4px rgba(23, 53, 64, 0.10);

  /* ---------- Radii ---------- */
  --radius-xs: 6px;    /* Chips, tags */
  --radius-sm: 8px;    /* Menu items, inline tokens */
  --radius-md: 12px;   /* Buttons, inputs — the default */
  --radius-lg: 16px;   /* Cards */
  --radius-xl: 24px;   /* Large surfaces */
  --radius-pill: 999px;

  /* ---------- Spacing (4-point scale) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ---------- Typography ---------- */
  --font-sans: "Suisse Int'l", "Inter", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Figma uses Inter for small uppercase section labels (10px, 1.5px tracking). */
  --font-ui: "Inter", "Suisse Int'l", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo,
               Consolas, monospace;

  /* Size scale (from Figma: 10, 12, 14, 16, 20, 32, 48, 60) */
  --fs-xxs: 10px;
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  20px;
  --fs-xl:  32px;
  --fs-2xl: 48px;
  --fs-3xl: 60px;

  /* Tracking */
  --tracking-tight: -0.020em;   /* Display & H1/H2 */
  --tracking-wide:   0.020em;   /* Labels, helper text */
  --tracking-label:  1.5px;     /* ALL-CAPS section labels */
}

/* ---------- Base element styles ---------- */

html, body {
  font-family: var(--font-sans);
  font-weight: 350;                  /* Book */
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--fg-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic type classes ----------
   Use these in HTML/JSX — they pin font-family, weight, size, leading,
   tracking and color so designs stay in lockstep with the Figma source. */

.display-1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-2xl);         /* 48 */
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--c-ink-800);
}
.display-2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-xl);          /* 32 */
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--c-ink-800);
}
.h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-lg);          /* 20, bold card heading */
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}
.h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-lg);          /* 20 Medium — section titles */
  line-height: 1;
  color: var(--fg-primary);
}
.body {
  font-family: var(--font-sans);
  font-weight: 350;
  font-size: var(--fs-md);          /* 16 Book */
  line-height: 1.5;
  color: var(--fg-primary);
}
.body-m {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-sm);          /* 14 Regular */
  line-height: 1.4;
  color: var(--fg-primary);
}
.body-s {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-xs);          /* 12 */
  line-height: 1.4;
  color: var(--fg-secondary);
}
.body-xs {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-xxs);         /* 10 */
  line-height: 1.4;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-secondary);
}
.button-text {
  font-family: var(--font-ui);      /* Inter 14/700 */
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--fg-on-brand);
}
.label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-xxs);
  line-height: 1.4;
  letter-spacing: var(--tracking-wide);
  color: var(--c-ink-500);
}
/* ALL-CAPS section markers (the little pill labels in the Figma — Inter 10/700, 1.5px tracked) */
.eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-xxs);
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-inverse);
}

/* ---------- Focus ring ---------- */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: inherit;
}