/* ============================================================
 * Riff Interface Standard (RIS) — Colors & Type
 * Source of truth: ris/_styles/_ris.sass, ris/_styles/tokens.css
 * ============================================================ */

/* ---- Webfonts (served from ./fonts/) ---- */
@font-face {
  font-family: 'Tiempos Headline';
  src: url('./fonts/TiemposHeadline-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tiempos Text';
  src: url('./fonts/TiemposText-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tiempos Text';
  src: url('./fonts/TiemposText-RegularItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'RiformaLLSub';
  src: url('./fonts/RiformaLLSub-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'RiformaLLSub';
  src: url('./fonts/RiformaLLSub-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'RiformaLLSub';
  src: url('./fonts/RiformaLLSub-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fragment Mono';
  src: url('./fonts/FragmentMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fragment Mono';
  src: url('./fonts/FragmentMono-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
 * Design tokens
 * ============================================================ */
:root {
  /* ---------- Fonts ----------*/
  --font-display: 'Tiempos Headline', Georgia, 'Times New Roman', serif;
  --font-heading: 'RiformaLLSub', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-body:    'RiformaLLSub', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-serif:   'Tiempos Text', Georgia, 'Times New Roman', serif;
  --font-mono:    'Fragment Mono', 'JetBrains Mono', Consolas, Monaco, monospace;
  --font-lato:    'RiformaLLSub', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-system:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---------- Type hierarchy (absolute, per RIS spec) ----------
   * Use via the utility classes below or directly with var()s.
   */
  /* Display / sections */
  --type-display-size:      4.5rem;    /* 72px */
  --type-display-lh:        1.10;
  --type-display-track:     -2.16px;

  --type-section-size:      2.25rem;   /* 36px */
  --type-section-lh:        1.20;
  --type-section-track:     -0.72px;

  --type-subheading-size:   1.625rem;  /* 26px */
  --type-subheading-lh:     1.25;
  --type-subheading-track:  -0.325px;

  --type-title-sm-size:     1.375rem;  /* 22px */
  --type-title-sm-lh:       1.30;
  --type-title-sm-track:    -0.11px;

  /* Body */
  --type-body-serif-size:   1.20rem;   /* 19.2px */
  --type-body-serif-lh:     1.50;

  --type-body-serif-sm-size: 1.08rem;  /* 17.28px */
  --type-body-serif-sm-lh:  1.35;

  --type-body-sans-size:    1rem;      /* 16px */
  --type-body-sans-lh:      1.50;
  --type-body-sans-track:   0.08px;

  /* UI chrome */
  --type-button-size:       0.875rem;  /* 14px */
  --type-button-lh:         1.00;
  --type-caption-btn-track: 0.14px;

  --type-caption-size:      0.6875rem; /* 11px */
  --type-caption-lh:        1.50;

  /* System */
  --type-system-h-size:     1.25rem;   /* 20px */
  --type-system-h-weight:   700;
  --type-system-h-lh:       1.55;

  --type-system-cap-size:   0.8125rem; /* 13px */
  --type-system-cap-weight: 500;
  --type-system-cap-lh:     1.33;

  --type-system-micro-size: 0.6875rem; /* 11px */
  --type-system-micro-weight:500;
  --type-system-micro-lh:   1.27;
  --type-system-micro-track:0.048px;

  /* Mono */
  --type-mono-size:         0.75rem;   /* 12px */
  --type-mono-lh:           1.67;

  --type-mono-sm-size:      0.6875rem; /* 11px */
  --type-mono-sm-lh:        1.33;
  --type-mono-sm-track:     -0.275px;

  /* ---------- Spacing ---------- */
  --space: 0.8125rem;
  --space-scale: 1.4;
  --space-2xs: 0.2115rem;
  --space-xs:  0.4145rem;
  --space-sm:  0.625rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 6.1177rem;
  --space-3xl: 11.9908rem;

  /* ---------- Radii ---------- */
  --radius-xs:   0.35rem;
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.25rem;
  --radius-2xl:  1.5rem;
  --radius-pill: 999rem;

  /* ---------- Motion ---------- */
  --cubic:         cubic-bezier(.18,.05,.15,1);
  --speed-fast:    200ms;
  --speed-default: 600ms;
  --speed-slow:    900ms;

  /* ---------- Surfaces (backgrounds) ---------- */
  --color-bg-0: #FFFFFF;
  --color-bg-1: oklch(0.98 0.003 258);
  --color-bg-2: oklch(0.97 0.003 258);
  --color-bg-3: oklch(0.95 0.003 258);

  /* ---------- Foreground (text) ---------- */
  --color-fg-0: oklch(0.2  0.05 258);
  --color-fg-1: oklch(0.4  0.04 258);
  --color-fg-2: oklch(0.65 0.03 258);
  --color-fg-3: oklch(0.8  0.02 258);

  /* ---------- Borders ---------- */
  --color-border: oklch(0.93 0.003 258);

  /* ---------- Absolutes ---------- */
  --color-white: #ffffff;
  --color-black: #000000;

  /* ---------- Accent palette (RIS Blue is the signature) ---------- */
  --color-blue:              oklch(0.6004 0.2153 258.02);
  --color-blue-glow:         oklch(0.8388 0.155465 233);
  --color-blue-glow-subtle:  oklch(0.7 0.2 258 / 0.5);
  --color-blue-ring:         oklch(0.7 0.15 258);

  --color-red:       oklch(0.6 0.2 20);
  --color-red-ring:  oklch(0.7 0.15 20);
  --color-green:     oklch(0.62 0.17 150);
  --color-green-ring:oklch(0.78 0.14 150);
  --color-orange:    oklch(0.68 0.18 60);
  --color-orange-ring:oklch(0.82 0.14 60);

  /* ---------- Chart / data-viz palette ---------- */
  --color-chart-1: #008AFF;
  --color-chart-2: #00C48B;
  --color-chart-3: #A06AFF;
  --color-chart-4: #FFA400;
  --color-chart-5: #FF329B;
  --color-chart-6: #E4383F;

  --color-shadow: oklch(0.2 0.05 260 / 0.3);

  /* ---------- Brand scales (from _ris.sass) ---------- */
  --brand-50:  oklch(0.9705 0.0142 254.6);
  --brand-100: oklch(0.8956 0.0508 259.4);
  --brand-200: oklch(0.821  0.0897 259.45);
  --brand-300: oklch(0.7479 0.1301 258.98);
  --brand-400: oklch(0.6739 0.1732 259.16);
  --brand-500: oklch(0.6004 0.2153 258.02);
  --brand-600: oklch(0.5232 0.2022 258.93);
  --brand-700: oklch(0.4184 0.1613 258.89);
  --brand-800: oklch(0.3074 0.1191 259.0);
  --brand-900: oklch(0.2095 0.0827 259.38);

  --neutral-50:  oklch(0.9705 0.0142 254.6);
  --neutral-100: oklch(0.8261 0.0255 257.65);
  --neutral-200: oklch(0.6823 0.0255 256.14);
  --neutral-300: oklch(0.5386 0.0265 258.37);
  --neutral-400: oklch(0.3941 0.0257 255.07);
  --neutral-500: oklch(0.2502 0.0297 259.06);
  --neutral-600: oklch(0.1983 0.0551 258.24);
  --neutral-700: oklch(0.1338 0.0484 257.47);
  --neutral-800: oklch(0.0676 0.0214 253.83);
  --neutral-900: oklch(0 0 0);

  /* ---------- Buttons ---------- */
  --color-btn-bg-primary-default: oklch(0.25 0.06 258);
  --color-btn-bg-primary-hover:   oklch(0.35 0.05 258);
  --color-btn-bg-primary-active:  oklch(0.2  0.04 258);
  --color-btn-bg-secondary-default: oklch(1 0 0);
  --color-btn-bg-secondary-hover:   oklch(0.97 0.005 258);
  --color-btn-bg-secondary-active:  oklch(0.94 0.005 258);
  --color-btn-bg-accent-default: conic-gradient(
    from 33deg at 40% 50%,
    oklch(0.55 0.2 258.02) 0%,
    oklch(0.7388 0.155465 236.7713) 100%
  );
  --color-btn-bg-disabled: oklch(0.65 0.003 258);
  --color-btn-fg-disabled: oklch(0.8  0.003 258);
  --color-btn-link-default: oklch(0.65 0.25 258);
  --color-btn-link-hover:   oklch(0.75 0.25 250);
  --color-btn-link-active:  oklch(0.6  0.25 260);

  /* ---------- Inputs ---------- */
  --color-input-bg-default: oklch(0.98 0.003 258);
  --color-input-bg-hover:   oklch(0.97 0.003 258);
  --color-input-bg-active:  oklch(0.99 0.003 258);
  --color-input-fg:           var(--color-fg-0);
  --color-input-fg-disabled:  oklch(0.4 0.03 258);
  --color-input-fg-placeholder: var(--color-fg-2);
  --color-input-border-default: var(--color-border);
  --color-input-border-focus:   oklch(0.6004 0.2153 258.02);
  --color-input-border-error:   oklch(0.92 0.003 258);
  --color-input-border-success: oklch(0.92 0.003 258);
  --color-input-border-warning: oklch(0.92 0.003 258);

  /* ---------- Gradients ---------- */
  --gradient-fg-fade: linear-gradient(to top, var(--color-fg-0) -50%, var(--color-fg-2) 220%);
  --gradient-bg-fade: linear-gradient(to bottom, var(--color-bg-0) -50%, var(--color-bg-2) 200%);
  --gradient-sky:     linear-gradient(to bottom, #1c7afe, #9ad6ff);

  /* ---------- Shadow system ---------- */
  --shadow-ring:         var(--color-bg-2) 0 0 0 2px, var(--color-bg-3) 0 0 0 3px;
  --shadow-ring-blue:    var(--color-blue-ring)  0 0 0 3px;
  --shadow-ring-red:     var(--color-red-ring)   0 0 0 3px;
  --shadow-ring-green:   var(--color-green-ring) 0 0 0 3px;
  --shadow-ring-orange:  var(--color-orange-ring) 0 0 0 3px;
  --shadow-contained:    rgba(0,0,0,0.08) 0 0.5px 0 0.5px, rgba(0,0,0,0.08) 0 2px 4px 1px;
  --shadow-floating:     rgba(0,0,0,0.08) 0 0.5px 0 0.5px, rgba(0,0,0,0.12) 0 10px 25px 0;
}

/* ============================================================
 * Semantic type primitives — use these OR the tokens above
 * ============================================================ */
.ris-root {
  font-family: var(--font-body);
  color: var(--color-fg-0);
  font-size: var(--text-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--color-bg-0);
}

.ris-root h1, .ris-display-hero {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 300;
  letter-spacing: var(--letter-spacing-tighter);
  line-height: 1;
  color: var(--color-fg-0);
}
.ris-root h2, .ris-section-display {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 300;
  letter-spacing: var(--letter-spacing-tighter);
  line-height: 1.15;
  color: var(--color-fg-0);
}
.ris-root h3, .ris-section-heading {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-tighter);
  line-height: 1.25;
  color: var(--color-fg-0);
}
.ris-root h4, .ris-feature-heading {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-tighter);
  line-height: 1.25;
  color: var(--color-fg-0);
}
.ris-root h5, .ris-subheading {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.4;
  color: var(--color-fg-0);
}
.ris-root h6, .ris-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.25;
  color: var(--color-fg-0);
}
.ris-body-large {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.4;
  color: var(--color-fg-1);
}
.ris-root p, .ris-body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-normal);
  line-height: 1.4;
  color: var(--color-fg-1);
}
.ris-caption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-fg-1);
}
.ris-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-fg-2);
}
.ris-root code, .ris-root pre, .ris-root kbd, .ris-root samp, .ris-code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-fg-1);
}

/* ============================================================
 * Type hierarchy utility classes — canonical spec
 * ============================================================ */
.ris-display      { font-family:var(--font-display); font-weight:300; font-size:var(--type-display-size);      line-height:var(--type-display-lh);      letter-spacing:var(--type-display-track); color:var(--color-fg-0); }
.ris-section      { font-family:var(--font-display); font-weight:500; font-size:var(--type-section-size);      line-height:var(--type-section-lh);      letter-spacing:var(--type-section-track); color:var(--color-fg-0); }
.ris-subheading   { font-family:var(--font-display); font-weight:400; font-size:var(--type-subheading-size);   line-height:var(--type-subheading-lh);   letter-spacing:var(--type-subheading-track); color:var(--color-fg-0); }
.ris-title-sm     { font-family:var(--font-display); font-weight:500; font-size:var(--type-title-sm-size);     line-height:var(--type-title-sm-lh);     letter-spacing:var(--type-title-sm-track); color:var(--color-fg-0); }

.ris-body-serif    { font-family:var(--font-serif); font-weight:500; font-size:var(--type-body-serif-size);    line-height:var(--type-body-serif-lh);    font-feature-settings:"cswh"; color:var(--color-fg-1); }
.ris-body-serif-sm { font-family:var(--font-serif); font-weight:400; font-size:var(--type-body-serif-sm-size); line-height:var(--type-body-serif-sm-lh); color:var(--color-fg-1); }
.ris-body-sans     { font-family:var(--font-body);  font-weight:400; font-size:var(--type-body-sans-size);     line-height:var(--type-body-sans-lh);     letter-spacing:var(--type-body-sans-track); color:var(--color-fg-1); }

.ris-button-label   { font-family:var(--font-body); font-weight:400; font-size:var(--type-button-size);  line-height:var(--type-button-lh); }
.ris-button-caption { font-family:var(--font-body); font-weight:400; font-size:var(--type-button-size);  line-height:1.5; letter-spacing:var(--type-caption-btn-track); font-feature-settings:"ss09"; }
.ris-caption-xs     { font-family:var(--font-body); font-weight:400; font-size:var(--type-caption-size); line-height:var(--type-caption-lh); color:var(--color-fg-2); }

.ris-system-heading { font-family:var(--font-system); font-weight:var(--type-system-h-weight);   font-size:var(--type-system-h-size);   line-height:var(--type-system-h-lh); color:var(--color-fg-0); }
.ris-system-caption { font-family:var(--font-system); font-weight:var(--type-system-cap-weight); font-size:var(--type-system-cap-size); line-height:var(--type-system-cap-lh); color:var(--color-fg-1); }
.ris-system-micro   { font-family:var(--font-system); font-weight:var(--type-system-micro-weight); font-size:var(--type-system-micro-size); line-height:var(--type-system-micro-lh); letter-spacing:var(--type-system-micro-track); text-transform:uppercase; color:var(--color-fg-2); }

.ris-mono       { font-family:var(--font-mono); font-weight:400; font-size:var(--type-mono-size);    line-height:var(--type-mono-lh); color:var(--color-fg-1); }
.ris-mono-sm    { font-family:var(--font-mono); font-weight:400; font-size:var(--type-mono-sm-size); line-height:var(--type-mono-sm-lh); letter-spacing:var(--type-mono-sm-track); color:var(--color-fg-1); }

.ris-lato-heading { font-family:var(--font-lato); font-weight:var(--type-lato-h-weight); font-size:var(--type-lato-h-size);  line-height:var(--type-lato-h-lh); }
.ris-lato-caption { font-family:var(--font-lato); font-weight:400;                       font-size:var(--type-lato-cap-size); line-height:var(--type-lato-cap-lh); }
.ris-lato-micro   { font-family:var(--font-lato); font-weight:500;                       font-size:var(--type-lato-micro-size); line-height:var(--type-lato-micro-lh); letter-spacing:var(--type-lato-micro-track); text-transform:uppercase; }