@layer reset, tokens, base, components, pages, utilities;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  :where(body, h1, h2, p, ul) {
    margin: 0;
  }

  :where(ul) {
    padding: 0;
    list-style: none;
  }

  :where(img, svg) {
    display: block;
    max-inline-size: 100%;
  }

  :where(button, input, select) {
    font: inherit;
  }
}

@layer tokens {
  :root {
    --theme-background: #84866b;
    --theme-foreground: #f1f1f1;
    --theme-accent: #e1b3b3;
    --theme-heading: #4d5145;
    --theme-on-accent: #1f2421;
    --theme-page: color-mix(in oklch, var(--theme-background), var(--theme-accent) 42%);
    --theme-paper: color-mix(in oklch, var(--theme-foreground), white 86%);
    --theme-ink: #1f2421;
    --theme-muted: color-mix(in oklch, var(--theme-ink), var(--theme-paper) 38%);
    --theme-line: color-mix(in oklch, var(--theme-background), var(--theme-paper) 70%);
    --theme-font-en: "Inter";
    --theme-font-en-text: "Inter";
    --theme-font-en-title: "Playfair Display";
    --theme-font-he: "Noto Sans Hebrew";
    --theme-font-he-text: "Noto Sans Hebrew";
    --theme-font-he-title: "Frank Ruhl Libre";
    --theme-font-current: var(--theme-font-he);
    --theme-font-current-text: var(--theme-font-he-text);
    --theme-font-current-title: var(--theme-font-he-title);
    --theme-font-body: var(--theme-font-current);
    --theme-font-display: var(--theme-font-current-title);
    --font-body: var(--theme-font-current-text), ui-sans-serif, system-ui, sans-serif;
    --font-display: var(--theme-font-current-title), ui-serif, "Georgia", serif;
    --font-size-caption: 0.84rem;
    --font-size-copy: clamp(0.92rem, 0.84rem + 0.32vi, 1.08rem);
    --font-size-eyebrow: clamp(0.78rem, 0.74rem + 0.18vi, 0.9rem);
    --font-size-heading: clamp(1.75rem, 1.35rem + 1.4vi, 2.55rem);
    --font-size-hero: clamp(1.35rem, 1rem + 1.35vi, 2rem);
    --font-size-label: clamp(0.78rem, 0.72rem + 0.24vi, 0.92rem);
    --font-size-metric: 0.92rem;
    --font-size-nav: clamp(0.92rem, 0.82rem + 0.45vi, 1.16rem);
    --font-size-panel-title: clamp(0.8rem, 0.76rem + 0.2vi, 0.95rem);
    --font-weight-medium: 650;
    --font-weight-strong: 750;
    --font-weight-heavy: 800;
    --font-weight-display: 850;
    --line-height-base: 1.5;
    --line-height-copy: 1.75;
    --line-height-heading: 1.05;
    --line-height-note: 1.45;
    --color-brand-surface: oklch(61% 0.04 91deg);
    --color-brand-ink: oklch(96% 0.01 92deg);
    --color-brand-accent: oklch(78% 0.08 8deg);
    --color-brand-heading: oklch(41% 0.04 105deg);
    --color-brand-on-accent: oklch(24% 0.02 145deg);
    --color-canvas: white;
    --color-transparent: transparent;
    --color-page: var(--theme-page);
    --color-paper: var(--theme-paper);
    --color-ink: var(--theme-ink);
    --color-muted: var(--theme-muted);
    --color-line: var(--theme-line);
    --color-focus: oklch(60% 0.18 245deg);
    --color-field: color-mix(in oklch, var(--color-paper), var(--color-canvas) 40%);
    --color-nav-link: color-mix(in oklch, var(--color-brand-ink), var(--color-brand-surface) 6%);
    --color-sheet: color-mix(in oklch, var(--color-line), var(--color-canvas) 16%);
    --color-score-end: oklch(54% 0.1 145deg);
    --color-score-mid: oklch(68% 0.1 82deg);
    --color-score-start: oklch(48% 0.12 22deg);
    --color-score-track: color-mix(in oklch, var(--color-line), var(--color-canvas) 18%);
    --color-select-background: color-mix(in oklch, var(--color-paper), var(--color-transparent) 8%);
    --color-select-border: color-mix(in oklch, var(--color-brand-on-accent), var(--color-transparent) 55%);
    --color-swatch-border: oklch(20% 0.02 145deg / 18%);
    --color-tinted-label: color-mix(in oklch, var(--color-brand-on-accent), var(--color-paper) 16%);
    --color-page-backdrop: linear-gradient(
      90deg,
      color-mix(in oklch, var(--color-brand-accent), var(--color-canvas) 24%) 0 50%,
      color-mix(in oklch, var(--color-brand-surface), var(--color-canvas) 72%) 50% 100%
    );
    --color-fold-background: radial-gradient(circle at 100% 0, var(--color-brand-accent) 0 var(--space-decor-circle), var(--color-transparent) calc(var(--space-decor-circle) + var(--space-decor-gap))),
      linear-gradient(var(--color-paper), var(--color-paper));
    --color-score-gradient: linear-gradient(90deg, var(--color-score-start), var(--color-score-mid) 45%, var(--color-score-end));
    --space-0: 0;
    --space-border: 1px;
    --space-decor-gap: 0.06rem;
    --space-focus-ring: 0.18rem;
    --space-hidden: 1px;
    --space-1: clamp(0.25rem, 0.2rem + 0.2vi, 0.38rem);
    --space-2: clamp(0.5rem, 0.42rem + 0.34vi, 0.75rem);
    --space-3: clamp(0.75rem, 0.62rem + 0.55vi, 1.12rem);
    --space-4: clamp(1rem, 0.82rem + 0.75vi, 1.5rem);
    --space-5: clamp(1.4rem, 1.08rem + 1.35vi, 2.4rem);
    --space-6: clamp(2rem, 1.42rem + 2.5vi, 4rem);
    --radius-1: 0.375rem;
    --radius-2: 0.5rem;
    --radius-pill: 999px;
    --shadow-soft: 0 1rem 3rem oklch(20% 0.04 60deg / 16%);
    --shadow-selected: inset 0 0 0 var(--space-border) var(--color-ink);
    --border-brand: var(--space-border) solid var(--color-brand-surface);
    --border-control: var(--space-border) solid var(--color-select-border);
    --border-ink: var(--space-border) solid var(--color-ink);
    --border-line: var(--space-border) solid var(--color-line);
    --border-swatch: var(--space-border) solid var(--color-swatch-border);
    --measure-admin-inline: min(var(--measure-admin-max), calc(var(--measure-full) - var(--space-5)));
    --measure-admin-column-min: 23rem;
    --measure-admin-max: 72rem;
    --measure-admin-nav-block: 2.5rem;
    --measure-admin-shell-block: calc(var(--measure-viewport-block) - var(--space-6));
    --measure-button-block: 2.65rem;
    --measure-color-control: 2.75rem;
    --measure-content: 34rem;
    --measure-control-block: 2.4rem;
    --measure-craft-mark: 7rem;
    --measure-craft-ratio: 1.35;
    --measure-craft-star: 8rem;
    --measure-craft-visual: min(var(--measure-full), 22rem);
    --measure-decor-circle: clamp(2.5rem, 10vi, 4.2rem);
    --measure-field-name: 7rem;
    --measure-field-swatch: 5.5rem;
    --measure-field-value: 8rem;
    --measure-fold-block: clamp(22rem, 56vb, 32rem);
    --measure-full: 100%;
    --measure-input-max: 14rem;
    --measure-input-min: 9rem;
    --measure-landing-block: min(45rem, calc(var(--measure-viewport-block) - var(--space-4)));
    --measure-landing-inline: min(73rem, calc(var(--measure-full) - var(--space-4)));
    --measure-logo: clamp(12rem, 24vi, 21rem);
    --measure-logo-preview-block: clamp(18rem, 52vb, 34rem);
    --measure-logo-preview-inline: min(var(--measure-full), 42rem);
    --measure-meter-block: 0.5rem;
    --measure-note-block: 1.2em;
    --measure-preset-block: 4.5rem;
    --measure-preset-track: 8rem;
    --measure-score-width: var(--score-width, var(--space-0));
    --measure-select-block: 2.35rem;
    --measure-select-inline: 12rem;
    --measure-sheet-track: 1.5rem;
    --measure-square-ratio: 1;
    --measure-star-rotation: -11deg;
    --measure-styling-panel-min: 16rem;
    --measure-text-track: 21rem;
    --measure-tool-rotation: 17deg;
    --measure-viewport-block: 100vb;
    --measure-visually-hidden: var(--space-hidden);
    --measure-wide-gap: clamp(1.4rem, 4vi, 4rem);

    color-scheme: light;
  }

  [data-theme-surface] {
    --color-brand-surface: var(--theme-background);
    --color-brand-ink: var(--theme-foreground);
    --color-brand-accent: var(--theme-accent);
    --color-brand-heading: var(--theme-heading);
    --color-brand-on-accent: var(--theme-on-accent);
    --color-page: var(--theme-page);
    --color-paper: var(--theme-paper);
    --color-ink: var(--theme-ink);
    --color-muted: var(--theme-muted);
    --color-line: var(--theme-line);
  }
}

@layer base {
  html {
    min-block-size: 100%;
    background: var(--color-page);
    color: var(--color-ink);
    font-family: var(--font-body);
    line-height: var(--line-height-base);
    text-rendering: optimizelegibility;
  }

  body {
    min-block-size: var(--measure-viewport-block);
    background: var(--color-page-backdrop);
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  :focus-visible {
    outline: var(--space-focus-ring) solid var(--color-focus);
    outline-offset: var(--space-focus-ring);
  }
}

@layer components {
  .eyebrow {
    color: var(--color-muted);
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-strong);
  }

  .admin-shell {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--measure-full), var(--measure-admin-column-min)), 1fr));
    inline-size: var(--measure-admin-inline);
    min-block-size: var(--measure-admin-shell-block);
    margin: var(--space-4) auto calc(var(--space-6) / 2);
    border: var(--border-line);
    background: var(--color-paper);
    box-shadow: var(--shadow-soft);
  }

  .admin-page {
    min-block-size: var(--measure-viewport-block);
    padding-block: var(--space-4);
  }

  .admin-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    inline-size: var(--measure-admin-inline);
    margin-inline: auto;
  }

  .admin-nav a {
    display: inline-grid;
    min-block-size: var(--measure-admin-nav-block);
    align-items: center;
    padding-inline: var(--space-3);
    border: var(--border-line);
    border-radius: var(--radius-1);
    background: var(--color-paper);
    color: var(--color-muted);
    font-weight: var(--font-weight-heavy);
  }

  .admin-nav a[aria-current="page"] {
    border: var(--border-brand);
    background: var(--color-brand-surface);
    color: var(--color-brand-ink);
  }

  .admin-nav__controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .admin-picker {
    display: grid;
    grid-template-columns: auto minmax(var(--measure-preset-track), var(--measure-select-inline));
    align-items: center;
    gap: var(--space-2);
  }

  .admin-picker label {
    color: var(--color-muted);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-heavy);
  }

  .admin-picker select {
    min-block-size: var(--measure-select-block);
    inline-size: var(--measure-full);
    border: var(--border-line);
    border-radius: var(--radius-1);
    background: var(--color-field);
    color: var(--color-ink);
    font-weight: var(--font-weight-strong);
  }

  .logo-preview {
    display: grid;
    align-items: center;
    min-block-size: var(--measure-logo-preview-block);
    padding: var(--space-6);
    background: var(--color-brand-surface);
  }

  .logo-preview__mount {
    inline-size: var(--measure-logo-preview-inline);
  }

  .logo-preview__mount svg {
    inline-size: 100%;
    block-size: auto;
  }

  .palette-panel {
    display: grid;
    align-content: start;
    gap: var(--space-5);
    padding: var(--space-5);
    border-inline-start: var(--border-line);
  }

  .palette-panel__group {
    display: grid;
    gap: var(--space-3);
  }

  .palette-panel__title {
    color: var(--color-muted);
    font-size: var(--font-size-panel-title);
    font-weight: var(--font-weight-heavy);
  }

  .styling-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-block-end: var(--space-2);
    border-block-end: var(--border-line);
  }

  .styling-subnav button {
    display: inline-grid;
    min-block-size: var(--measure-select-block);
    align-items: center;
    padding-inline: var(--space-3);
    border: var(--border-line);
    border-radius: var(--radius-1);
    background: var(--color-field);
    color: var(--color-muted);
    font-weight: var(--font-weight-heavy);
    cursor: pointer;
  }

  .styling-subnav button[aria-selected="true"] {
    border-color: var(--color-brand-surface);
    background: var(--color-brand-surface);
    color: var(--color-brand-ink);
  }

  .styling-subnav button:focus,
  .styling-subnav button:hover {
    border-color: var(--color-brand-surface);
    color: var(--color-ink);
  }

  .styling-workspace {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--measure-full), var(--measure-styling-panel-min)), 1fr));
    gap: var(--space-4);
    align-items: start;
  }

  .styling-panel {
    align-content: start;
  }

  .color-field {
    display: grid;
    grid-template-columns: var(--measure-color-control) minmax(var(--measure-field-name), 1fr) minmax(var(--measure-field-swatch), var(--measure-field-value));
    align-items: center;
    gap: var(--space-3);
    min-inline-size: 0;
  }

  .color-field input[type="color"] {
    inline-size: var(--measure-color-control);
    block-size: var(--measure-color-control);
    padding: 0;
    border: var(--border-line);
    background: var(--color-transparent);
    cursor: pointer;
  }

  .color-field label {
    min-inline-size: 0;
    font-weight: var(--font-weight-strong);
  }

  .hex-value,
  .theme-name,
  .palette-select {
    min-block-size: var(--measure-control-block);
    border: var(--border-line);
    border-radius: var(--radius-1);
    background: var(--color-field);
    color: var(--color-ink);
  }

  .hex-value {
    inline-size: 100%;
    font-size: var(--font-size-caption);
    text-align: center;
  }

  .font-field {
    display: grid;
    grid-template-columns: minmax(var(--measure-field-name), 1fr) minmax(var(--measure-input-min), var(--measure-input-max));
    align-items: center;
    gap: var(--space-3);
  }

  .font-field label {
    min-inline-size: 0;
    font-weight: var(--font-weight-strong);
  }

  .preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--measure-full), var(--measure-preset-track)), 1fr));
    gap: var(--space-2);
  }

  .preset {
    display: grid;
    gap: var(--space-2);
    min-block-size: var(--measure-preset-block);
    padding: var(--space-2);
    border: var(--border-line);
    border-radius: var(--radius-1);
    background: var(--color-field);
    color: var(--color-ink);
    cursor: pointer;
  }

  .preset[aria-pressed="true"] {
    border-color: var(--color-ink);
    box-shadow: var(--shadow-selected);
  }

  .preset-name {
    overflow: hidden;
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-strong);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .swatches {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    block-size: var(--measure-sheet-track);
    overflow: hidden;
    border: var(--border-swatch);
    border-radius: var(--radius-1);
  }

  .swatches span:nth-child(1) {
    background: var(--preset-bg);
  }

  .swatches span:nth-child(2) {
    background: var(--preset-text);
  }

  .swatches span:nth-child(3) {
    background: var(--preset-accent);
  }

  .save-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
  }

  .theme-name,
  .palette-select {
    inline-size: 100%;
    padding-inline: var(--space-2);
  }

  .action-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .palette-action {
    min-block-size: var(--measure-button-block);
    padding-inline: var(--space-3);
    border: var(--border-ink);
    border-radius: var(--radius-1);
    background: var(--color-ink);
    color: var(--color-paper);
    font-weight: var(--font-weight-heavy);
    cursor: pointer;
  }

  .palette-action--secondary {
    background: var(--color-transparent);
    color: var(--color-ink);
  }

  .metrics {
    gap: var(--space-2);
  }

  .metric {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
    align-items: baseline;
    padding-block: var(--space-2);
    border-block-start: var(--border-line);
  }

  .metric strong {
    font-size: var(--font-size-metric);
  }

  .metric span {
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
  }

  .score {
    display: grid;
    gap: var(--space-2);
  }

  .score-label {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    font-weight: var(--font-weight-heavy);
  }

  .score-bar {
    block-size: var(--measure-meter-block);
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--color-score-track);
  }

  .score-bar div {
    inline-size: var(--measure-score-width);
    block-size: var(--measure-full);
    background: var(--color-score-gradient);
  }

  .formula-note {
    min-block-size: var(--measure-note-block);
    color: var(--color-muted);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-note);
  }
}

@layer pages {
  .landing-page {
    color: var(--color-ink);
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    inline-size: var(--measure-visually-hidden);
    block-size: var(--measure-visually-hidden);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}