/* Simpyl AI · Brand tokens v1 (draft)
   Three colors only: Poster Yellow, Wall Black, White.
   Load Archivo from /fonts (OFL) or Google Fonts. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Core palette (the only brand colors) ---- */
  --simpyl-yellow: #FFD21F;  /* Poster Yellow  rgb(255 210 31) */
  --simpyl-black:  #100F0D;  /* Wall Black     rgb(16 15 13)   */
  --simpyl-white:  #FFFFFF;  /* White          rgb(255 255 255) */

  /* ---- Secondary, UI only: raised surface on black ---- */
  --simpyl-card:   #1C1A16;  /* Card rgb(28 26 22). Never on yellow or white. */

  /* ---- Typography ---- */
  --font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-stretch: 100%;

  --type-display-size: clamp(56px, 8vw, 120px);
  --type-display-weight: 900;
  --type-display-leading: 0.95;
  --type-display-tracking: -0.02em;

  --type-h1-size: clamp(40px, 5vw, 56px);
  --type-h1-weight: 900;
  --type-h1-leading: 1.0;
  --type-h1-tracking: -0.015em;

  --type-h2-size: 32px;
  --type-h2-weight: 800;
  --type-h2-leading: 1.1;
  --type-h2-tracking: -0.01em;

  --type-body-size: 18px;
  --type-body-weight: 400;
  --type-body-leading: 1.5;
  --type-body-tracking: 0;

  --type-label-size: 13px;
  --type-label-weight: 600;
  --type-label-leading: 1.3;
  --type-label-tracking: 0.12em;   /* always UPPERCASE */

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 16px;  --space-4: 24px;
  --space-5: 32px;  --space-6: 48px;  --space-7: 64px;  --space-8: 96px;
  --space-9: 128px; --space-10: 192px;

  --page-margin: clamp(24px, 5vw, 80px);
  --grid-columns: 12;
  --grid-gutter: 24px;
  --measure: 34em;                 /* max line length for body copy */

  /* ---- Radii ---- */
  --radius-sm: 8px;                /* inputs, small chips */
  --radius-md: 16px;               /* buttons, small cards */
  --radius-lg: 28px;               /* panels, hero cards */
  --radius-pill: 999px;
  --radius-symbol: 22.35%;         /* app-icon tile, relative to tile size */

  /* ---- Lines ---- */
  --rule: 2px;                     /* dividers are solid, 2px, in the foreground color */

  /* ---- Default theme = black (yellow on black) ---- */
  --bg: var(--simpyl-black);
  --fg: var(--simpyl-yellow);
  --fg-muted: rgb(255 210 31 / 0.6);
  --accent: var(--simpyl-yellow);
  --on-accent: var(--simpyl-black);
  --surface: var(--simpyl-card);
  --line: var(--simpyl-yellow);
}

/* ---- Inversion system: the same layout in four modes ----
   Allowed pairings only. Yellow and white are never paired. */

[data-theme="yellow"] {            /* black on yellow · 13.2:1 */
  --bg: var(--simpyl-yellow);
  --fg: var(--simpyl-black);
  --fg-muted: rgb(16 15 13 / 0.65);
  --accent: var(--simpyl-black);   /* buttons go black with yellow text */
  --on-accent: var(--simpyl-yellow);
  --surface: var(--simpyl-yellow);
  --line: var(--simpyl-black);
}

[data-theme="black"] {             /* yellow on black · 13.2:1 */
  --bg: var(--simpyl-black);
  --fg: var(--simpyl-yellow);
  --fg-muted: rgb(255 210 31 / 0.6);
  --accent: var(--simpyl-yellow);
  --on-accent: var(--simpyl-black);
  --surface: var(--simpyl-card);
  --line: var(--simpyl-yellow);
}

[data-theme="white"] {             /* black on white · 19.2:1 */
  --bg: var(--simpyl-white);
  --fg: var(--simpyl-black);
  --fg-muted: rgb(16 15 13 / 0.65);
  --accent: var(--simpyl-black);   /* yellow may appear only inside black shapes */
  --on-accent: var(--simpyl-yellow);
  --surface: var(--simpyl-white);
  --line: var(--simpyl-black);
}

[data-theme="night"] {             /* white on black · 19.2:1, yellow for the one action */
  --bg: var(--simpyl-black);
  --fg: var(--simpyl-white);
  --fg-muted: rgb(255 255 255 / 0.6);
  --accent: var(--simpyl-yellow);
  --on-accent: var(--simpyl-black);
  --surface: var(--simpyl-card);
  --line: var(--simpyl-white);
}

/* ---- Base usage ---- */
[data-theme], :root {
  color: var(--fg);
  background: var(--bg);
}
body {
  font-family: var(--font-family);
  font-stretch: var(--font-stretch);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  -webkit-font-smoothing: antialiased;
}
.t-display { font-size: var(--type-display-size); font-weight: var(--type-display-weight); line-height: var(--type-display-leading); letter-spacing: var(--type-display-tracking); }
.t-h1      { font-size: var(--type-h1-size);      font-weight: var(--type-h1-weight);      line-height: var(--type-h1-leading);      letter-spacing: var(--type-h1-tracking); }
.t-h2      { font-size: var(--type-h2-size);      font-weight: var(--type-h2-weight);      line-height: var(--type-h2-leading);      letter-spacing: var(--type-h2-tracking); }
.t-body    { font-size: var(--type-body-size);    font-weight: var(--type-body-weight);    line-height: var(--type-body-leading);    max-width: var(--measure); }
.t-label   { font-size: var(--type-label-size);   font-weight: var(--type-label-weight);   line-height: var(--type-label-leading);   letter-spacing: var(--type-label-tracking); text-transform: uppercase; }
.t-num     { font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--accent); color: var(--on-accent);
  font: 700 17px/1 var(--font-family);
  border: 0;
}