/* Garick / The Fold. Opt-in primitives and roles; no global element styles.
   See brand-tokens.json for the schema and usage notes. Load font files separately. */
:root {
  --g-color-signal: #FF4D24;
  --g-color-ink: #24271F;
  --g-color-paper: #F8F9FA;
  --g-color-white: #FFFFFF;
  --g-color-surface: #F1F3F5;
  --g-color-canvas-dark: #1C1C1E;
  --g-color-hover-dark: #303033;
  --g-color-panel-dark: #252527;
  --g-color-muted: #62665C;
  --g-color-muted-dark: #B9B9BF;
  --g-color-line: #E2E4E8;
  --g-color-line-dark: #45454A;
  --g-color-control: #8C929D;
  --g-color-control-dark: #929298;
  --g-color-selection-dark: #3A3A3E;
  --g-color-signal-text: #B52E0C;
  --g-color-signal-text-dark: #FF9A78;
  --g-color-success-light: #24613E;
  --g-color-warning-light: #805A00;
  --g-color-error-light: #B42318;
  --g-color-info-light: #235EA7;
  --g-color-success-dark: #8DD6A7;
  --g-color-warning-dark: #F1CD70;
  --g-color-error-dark: #FF9A8B;
  --g-color-info-dark: #A7C7FF;

  --g-space-0: 0px;
  --g-space-1: 4px;
  --g-space-2: 8px;
  --g-space-3: 12px;
  --g-space-4: 16px;
  --g-space-6: 24px;
  --g-space-8: 32px;
  --g-space-10: 40px;
  --g-space-12: 48px;
  --g-space-16: 64px;
  --g-space-24: 96px;
  --g-space-32: 128px;
  --g-radius-small: 4px;
  --g-radius-medium: 6px;
  --g-radius-large: 16px;

  --g-duration-fast: 120ms;
  --g-duration-base: 200ms;
  --g-duration-slow: 320ms;
  --g-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --g-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --g-font-display: "Fraunces", Georgia, serif;
  --g-font-display-optical-sizing: auto;
  --g-font-display-variation-settings: "SOFT" 0, "WONK" 0;
  --g-font-text: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --g-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --g-type-display-large-size: 72px;
  --g-type-display-large-leading: 76px;
  --g-type-display-large-weight: 500;
  --g-type-display-large-tracking: -0.035em;
  --g-type-display-size: 48px;
  --g-type-display-leading: 52.8px;
  --g-type-display-weight: 500;
  --g-type-display-tracking: -0.03em;
  --g-type-heading-size: 36px;
  --g-type-heading-leading: 41.4px;
  --g-type-heading-weight: 500;
  --g-type-heading-tracking: -0.025em;
  --g-type-product-title-size: 30px;
  --g-type-product-title-leading: 36px;
  --g-type-product-title-weight: 500;
  --g-type-product-title-tracking: -0.025em;
  --g-type-subheading-size: 20px;
  --g-type-subheading-leading: 26px;
  --g-type-subheading-weight: 600;
  --g-type-subheading-tracking: -0.015em;
  --g-type-body-large-size: 18px;
  --g-type-body-large-leading: 27.9px;
  --g-type-body-large-weight: 400;
  --g-type-body-large-tracking: 0em;
  --g-type-body-size: 16px;
  --g-type-body-leading: 24.8px;
  --g-type-body-weight: 400;
  --g-type-body-tracking: 0em;
  --g-type-body-small-size: 14px;
  --g-type-body-small-leading: 21px;
  --g-type-body-small-weight: 400;
  --g-type-body-small-tracking: 0em;
  --g-type-caption-size: 12px;
  --g-type-caption-leading: 18px;
  --g-type-caption-weight: 400;
  --g-type-caption-tracking: 0em;
  --g-type-eyebrow-size: 12px;
  --g-type-eyebrow-leading: 16.8px;
  --g-type-eyebrow-weight: 500;
  --g-type-eyebrow-tracking: 0.08em;
}

:root,
[data-garick-theme="light"] {
  --g-canvas: var(--g-color-paper);
  --g-panel: var(--g-color-white);
  --g-surface: var(--g-color-surface);
  --g-text: var(--g-color-ink);
  --g-text-muted: var(--g-color-muted);
  --g-border: var(--g-color-line);
  --g-border-control: var(--g-color-control);
  --g-selection: var(--g-color-line);
  --g-action-bg: var(--g-color-ink);
  --g-action-text: var(--g-color-paper);
  --g-link: var(--g-color-signal-text);
  --g-focus: var(--g-color-ink);
  --g-status-success: var(--g-color-success-light);
  --g-status-warning: var(--g-color-warning-light);
  --g-status-error: var(--g-color-error-light);
  --g-status-info: var(--g-color-info-light);
}

[data-garick-theme="dark"] {
  --g-canvas: var(--g-color-canvas-dark);
  --g-panel: var(--g-color-panel-dark);
  --g-surface: var(--g-color-panel-dark);
  --g-text: var(--g-color-paper);
  --g-text-muted: var(--g-color-muted-dark);
  --g-border: var(--g-color-line-dark);
  --g-border-control: var(--g-color-control-dark);
  --g-selection: var(--g-color-selection-dark);
  --g-action-bg: var(--g-color-paper);
  --g-action-text: var(--g-color-canvas-dark);
  --g-link: var(--g-color-signal-text-dark);
  --g-focus: var(--g-color-paper);
  --g-status-success: var(--g-color-success-dark);
  --g-status-warning: var(--g-color-warning-dark);
  --g-status-error: var(--g-color-error-dark);
  --g-status-info: var(--g-color-info-dark);
}

/* Optional explicit utilities; never apply these to the outlined wordmark. */
.g-font-display {
  font-family: var(--g-font-display);
  font-optical-sizing: var(--g-font-display-optical-sizing);
  font-variation-settings: var(--g-font-display-variation-settings);
}
.g-font-text { font-family: var(--g-font-text); }
.g-font-mono { font-family: var(--g-font-mono); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  :root {
    --g-duration-fast: 1ms;
    --g-duration-base: 1ms;
    --g-duration-slow: 1ms;
  }
}