/* ========================================================================
   OMR Design System — Colors + Typography
   Source: omr-js monorepo (packages/config-tailwind)
   ======================================================================== */

/* Fonts — OMR One (variable, 400–800), local TTF */
@font-face {
  font-family: 'OMR One';
  src:
    url('fonts/OMROneVF.ttf') format('truetype-variations'),
    url('fonts/OMROneVF.ttf') format('truetype');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OMR Sans';
  src:
    url('https://static.omr.com/fonts/omrsans/OMR-Sans-Regular.woff2') format('woff2');
  font-weight: 100 400;
  font-display: swap;
}
@font-face {
  font-family: 'OMR Sans';
  src:
    url('https://static.omr.com/fonts/omrsans/OMR-Sans-Bold.woff2') format('woff2');
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: 'OMR Sans';
  src:
    url('https://static.omr.com/fonts/omrsans/OMR-Sans-Extra-Bold.woff2') format('woff2');
  font-weight: 800 900;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------------
     Layer 1 — Primitive colors (do not reference in components)
     ------------------------------------------------------------------ */
  --color-grey-0:    #ffffff;
  --color-grey-25:   #fdfdfd;
  --color-grey-50:   #f8f9fb;
  --color-grey-100:  #f3f4f6;
  --color-grey-150:  #ebecef;
  --color-grey-200:  #dfe1e5;
  --color-grey-250:  #d0d3d9;
  --color-grey-300:  #c0c4cc;
  --color-grey-350:  #a9aeb8;
  --color-grey-400:  #9197a3;
  --color-grey-450:  #7f8694;
  --color-grey-500:  #6c7380;
  --color-grey-550:  #5f6570;
  --color-grey-600:  #525862;
  --color-grey-650:  #434852;
  --color-grey-700:  #353a42;
  --color-grey-750:  #292c32;
  --color-grey-800:  #22242a;
  --color-grey-850:  #181b1f;
  --color-grey-900:  #121417;
  --color-grey-950:  #0c0d0f;
  --color-grey-975:  #060708;
  --color-grey-1000: #000000;
  --color-white: var(--color-grey-25);
  --color-true-white: #ffffff;
  --color-black: var(--color-grey-950);
  --color-true-black: #000000;

  --color-purple-25:  #f9f7ff;
  --color-purple-50:  #f4f2ff;
  --color-purple-100: #ebe8ff;
  --color-purple-200: #d8d4ff;
  --color-purple-300: #ada6fc;
  --color-purple-400: #8e7bff;
  --color-purple-500: #8259ff;
  --color-purple-600: #7337fc;  /* brand primary-main */
  --color-purple-700: #601ee3;  /* brand primary-strong */
  --color-purple-800: #4f18bf;
  --color-purple-900: #42169c;
  --color-purple-950: #270b6a;

  --color-yellow-50:  #fef9e8;
  --color-yellow-100: #fdf2c4;
  --color-yellow-200: #fbe69c;
  --color-yellow-300: #ffdb75;
  --color-yellow-400: #f5c41c;  /* brand secondary-main */
  --color-yellow-500: #f2b200;
  --color-yellow-600: #e39807;
  --color-yellow-700: #a6620a;
  --color-yellow-800: #824a11;
  --color-yellow-900: #6f3d14;
  --color-yellow-950: #411f07;

  --color-blue-500:   #2977ff;
  --color-green-500:  #00f58f;
  --color-jade-500:   #10b992;
  --color-mint-500:   #00adad;
  --color-red-500:    #ef4463;
  --color-red-700:    #b91740;
  --color-rose-500:   #ff47c6;

  /* ------------------------------------------------------------------
     Layer 2 — Semantic tokens (light theme defaults)
     ------------------------------------------------------------------ */
  /* Text */
  --text-color-main:            #0c0d0f;
  --text-color-subtle:          #353a42;
  --text-color-subtlest:        #6c7380;
  --text-color-inverse:         #f8f9fb;
  --text-color-primary:         #601ee3;
  --text-color-primary-subtle:  #ada6fc;
  --text-color-selected:        #601ee3;
  --text-color-disabled:        rgba(20, 27, 40, 0.4);
  --text-color-error:           #b91740;
  --text-color-success:         #065f4f;
  --text-color-warning:         #a6620a;
  --text-color-solid:           #000000;
  --text-color-solid-inverse:   #ffffff;

  /* Links */
  --text-color-link-main:     #0c0d0f;
  --text-color-link-primary:  #601ee3;
  --text-color-link-inverse:  #f8f9fb;
  --text-color-link-disabled: rgba(20, 27, 40, 0.4);

  /* Backgrounds */
  --background-color-surface:              #fdfdfd;
  --background-color-solid:                #ffffff;
  --background-color-surface-elevation-1:  #f8f9fb;
  --background-color-surface-elevation-2:  #f3f4f6;
  --background-color-surface-elevation-3:  #ebecef;
  --background-color-surface-elevation-4:  #dfe1e5;
  --background-color-surface-elevation-5:  #d0d3d9;
  --background-color-surface-inverse:      #060708;
  --background-color-primary-main:         #7337fc;
  --background-color-primary-strong:       #601ee3;
  --background-color-primary-stronger:     #4f18bf;
  --background-color-primary-subtle:       #d8d4ff;
  --background-color-primary-subtler:      #ebe8ff;
  --background-color-primary-subtlest:     #f4f2ff;
  --background-color-secondary-main:       #f5c41c;
  --background-color-secondary-strong:     #e39807;
  --background-color-secondary-subtle:     #ffdb75;
  --background-color-secondary-subtlest:   #fef9e8;
  --background-color-error-strong:         #b91740;
  --background-color-error-subtle:         #fff1f2;
  --background-color-success-strong:       #059678;
  --background-color-success-subtle:       #ecfdf7;
  --background-color-warning-strong:       #f5c41c;
  --background-color-warning-subtle:       #fef9e8;
  --background-color-disabled:             rgba(20, 27, 40, 0.05);

  /* Borders */
  --border-color-main:           rgba(20, 27, 40, 0.2);
  --border-color-main-solid:     #d0d3d9;
  --border-color-primary:        rgba(115, 55, 252, 0.9);
  --border-color-primary-solid:  #601ee3;
  --border-color-strong:         rgba(20, 27, 40, 0.5);
  --border-color-subtle:         rgba(20, 27, 40, 0.05);
  --border-color-error:          #dc224d;
  --border-color-success:        #10b992;
  --border-color-warning:        #f2b200;
  --border-color-selected:       rgba(115, 55, 252, 0.9);
  --border-color-disabled:       rgba(20, 27, 40, 0.1);

  /* Interaction state overlays */
  --background-color-state-hover-neutral:    rgba(20, 27, 40, 0.05);
  --background-color-state-pressed-neutral:  rgba(20, 27, 40, 0.1);
  --background-color-state-drag-neutral:     rgba(20, 27, 40, 0.2);
  --background-color-state-hover-primary:    rgba(115, 55, 252, 0.05);
  --background-color-state-pressed-primary:  rgba(115, 55, 252, 0.1);
  --background-color-state-hover-neutral-inverse:   rgba(255, 255, 255, 0.1);
  --background-color-state-pressed-neutral-inverse: rgba(255, 255, 255, 0.2);

  /* Effects */
  --background-color-effect-backdrop-overlay: rgba(20, 27, 40, 0.5);
  --background-color-effect-focused: #4f18bf;

  /* ------------------------------------------------------------------
     Typography — font families
     ------------------------------------------------------------------ */
  --font-sans: 'OMR One', 'Avenir', 'Helvetica', 'Arial', sans-serif;
  --font-sans-alt: 'OMR Sans', 'Avenir', 'Helvetica', 'Arial', sans-serif;
  --font-mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace;

  /* Tracking (converted to em for CSS use) */
  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.01em;
  --tracking-wider:   0.02em;

  /* Line heights */
  --leading-tight:  1.2;
  --leading-normal: 1.4;
  --leading-wide:   1.6;

  /* ------------------------------------------------------------------
     Spacing — 4px base Tailwind scale
     ------------------------------------------------------------------ */
  --space-0:  0;
  --space-px: 1px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;

  /* Radius — Figma source uses 4px as the default; 8px for cards; 12/16 for containers */
  --radius:    4px;   /* buttons, inputs, tags — all use 4 in Figma */
  --radius-s:  8px;   /* cards, elevated surfaces */
  --radius-m:  12px;  /* blocks, panels */
  --radius-l:  16px;  /* sections, modals */
  --radius-full: 9999px; /* pills, number badges, avatars */

  /* Elevation — matches /Elevation page base card */
  --elevation-0: none;
  --elevation-1: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  --elevation-2: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
  --elevation-3: 0 12px 32px -8px rgba(20, 27, 40, 0.12);
  --elevation-4: 0 24px 48px -12px rgba(0, 0, 0, 0.24);

  /* Motion */
  --duration-instant: 0ms;
  --duration-fast:    100ms;
  --duration-normal:  150ms;
  --duration-slow:    200ms;
  --duration-slower:  300ms;
  --easing-standard:   ease-in-out;
  --easing-decelerate: ease-out;
  --easing-accelerate: ease-in;
  --transition-color:      color 200ms ease-out;
  --transition-border:     border-color 200ms ease-out;
  --transition-opacity:    opacity 150ms ease-in-out;
  --transition-background: background-color 200ms ease-out;
  --transition-transform:  transform 200ms ease-out;

  /* Z-index */
  --z-index-below:    -1;
  --z-index-base:     0;
  --z-index-raised:   1;
  --z-index-dropdown: 10;
  --z-index-sticky:   20;
  --z-index-overlay:  30;
  --z-index-modal:    40;
  --z-index-toast:    50;

  /* Breakpoints */
  --breakpoint-tablet:  640px;
  --breakpoint-laptop:  1024px;
  --breakpoint-desktop: 1440px;
  --breakpoint-wide:    1920px;
}

/* ========================================================================
   Dark theme — flip by adding .dark-theme on a parent
   ======================================================================== */
.dark-theme {
  --text-color-main:            #f8f9fb;
  --text-color-subtle:          #c0c4cc;
  --text-color-subtlest:        #9197a3;
  --text-color-inverse:         #0c0d0f;
  --text-color-solid:           #ffffff;
  --text-color-solid-inverse:   #000000;
  --background-color-surface:            #060708;
  --background-color-solid:              #0c0d0f;
  --background-color-surface-elevation-1:#121417;
  --background-color-surface-elevation-2:#181b1f;
  --background-color-surface-elevation-3:#22242a;
  --background-color-surface-elevation-4:#292c32;
  --background-color-surface-elevation-5:#353a42;
  --background-color-surface-inverse:    #fdfdfd;
  --border-color-main:       rgba(255, 255, 255, 0.2);
  --border-color-main-solid: #353a42;
  --border-color-strong:     rgba(255, 255, 255, 0.5);
  --border-color-subtle:     rgba(255, 255, 255, 0.05);
}

/* ========================================================================
   Semantic typography classes — mirror OMR's txt-* utilities
   Fluid sizes use clamp() at laptop (≥1024px) and up.
   ======================================================================== */

html { font-family: var(--font-sans); color: var(--text-color-main); }
body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }

/* Labels — uppercase-capable UI labels, overlines, tags */
.txt-label-s        { font-size: 0.75rem;  line-height: var(--leading-normal); letter-spacing: var(--tracking-wider); font-weight: 400; }
.txt-label-s-bold   { font-size: 0.75rem;  line-height: var(--leading-normal); letter-spacing: var(--tracking-wider); font-weight: 700; }
.txt-label-s-bold-uppercase { font-size: 0.75rem; line-height: var(--leading-normal); letter-spacing: var(--tracking-wider); font-weight: 700; text-transform: uppercase; }
.txt-label-m        { font-size: 0.875rem; line-height: var(--leading-normal); letter-spacing: var(--tracking-wider); font-weight: 400; }
.txt-label-m-bold   { font-size: 0.875rem; line-height: var(--leading-normal); letter-spacing: var(--tracking-wider); font-weight: 700; }
.txt-label-m-bold-uppercase { font-size: 0.875rem; line-height: var(--leading-normal); letter-spacing: var(--tracking-wider); font-weight: 700; text-transform: uppercase; }

/* Body */
.txt-body-s         { font-size: clamp(0.875rem, 0.57rem + 0.48vw, 1rem);   line-height: var(--leading-normal); }
.txt-body-s-bold    { font-size: clamp(0.875rem, 0.57rem + 0.48vw, 1rem);   line-height: var(--leading-normal); font-weight: 700; }
.txt-body-m         { font-size: clamp(1rem, 0.69rem + 0.48vw, 1.125rem);   line-height: var(--leading-normal); }
.txt-body-m-bold    { font-size: clamp(1rem, 0.69rem + 0.48vw, 1.125rem);   line-height: var(--leading-normal); font-weight: 700; }
.txt-body-l         { font-size: clamp(1.125rem, 0.82rem + 0.48vw, 1.25rem); line-height: var(--leading-normal); }
.txt-body-l-bold    { font-size: clamp(1.125rem, 0.82rem + 0.48vw, 1.25rem); line-height: var(--leading-normal); font-weight: 700; }
.txt-body-xl        { font-size: clamp(1.25rem, 0.94rem + 0.48vw, 1.375rem); line-height: var(--leading-normal); }

/* Headlines — tight leading */
.txt-headline-s      { font-size: clamp(0.875rem, 0.57rem + 0.48vw, 1rem);   line-height: var(--leading-tight); font-weight: 700; }
.txt-headline-m      { font-size: clamp(1rem, 0.69rem + 0.48vw, 1.125rem);   line-height: var(--leading-tight); font-weight: 700; }
.txt-headline-l      { font-size: clamp(1.125rem, 0.82rem + 0.48vw, 1.25rem); line-height: var(--leading-tight); font-weight: 700; }
.txt-headline-xl     { font-size: clamp(1.25rem, 0.94rem + 0.48vw, 1.375rem); line-height: var(--leading-tight); font-weight: 700; }
.txt-headline-2xl    { font-size: clamp(1.5rem, 0.88rem + 0.96vw, 1.75rem);  line-height: var(--leading-tight); font-weight: 700; }
.txt-headline-3xl    { font-size: clamp(2rem, 1.38rem + 0.96vw, 2.25rem);    line-height: var(--leading-tight); font-weight: 700; }
.txt-headline-4xl    { font-size: clamp(2.5rem, 1.27rem + 1.93vw, 3rem);     line-height: var(--leading-tight); font-weight: 700; }
.txt-headline-5xl    { font-size: clamp(3rem, 1.15rem + 2.89vw, 3.75rem);    line-height: var(--leading-tight); font-weight: 700; }
.txt-headline-xl-extrabold-uppercase { font-size: clamp(1.25rem, 0.94rem + 0.48vw, 1.375rem); line-height: var(--leading-tight); letter-spacing: var(--tracking-wider); font-weight: 800; text-transform: uppercase; }
.txt-headline-2xl-extrabold-uppercase { font-size: clamp(1.5rem, 0.88rem + 0.96vw, 1.75rem); line-height: var(--leading-tight); letter-spacing: var(--tracking-wide); font-weight: 800; text-transform: uppercase; }

/* Display — hero headings */
.txt-display-s   { font-size: clamp(2.75rem, 1.08rem + 4.18vw, 4.5rem);  line-height: var(--leading-tight); font-weight: 700; }
.txt-display-m   { font-size: clamp(3rem, 1.12rem + 4.7vw, 5.25rem);    line-height: var(--leading-tight); font-weight: 700; }
.txt-display-l   { font-size: clamp(3rem, 0.49rem + 6.27vw, 6rem);     line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: 700; }
.txt-display-xl  { font-size: clamp(3rem, -0.77rem + 9.4vw, 6.75rem); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: 700; }
.txt-display-l-extrabold-uppercase  { font-size: clamp(3rem, 0.49rem + 6.27vw, 6rem); line-height: var(--leading-tight); font-weight: 800; text-transform: uppercase; }

/* Semantic element mapping — convenient when writing prose */
h1 { font: 800 clamp(3rem, 0.49rem + 6.27vw, 6rem)/1.1 var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--text-color-main); }
h2 { font: 700 clamp(2rem, 1.27rem + 1.93vw, 2.5rem)/1.15 var(--font-sans); color: var(--text-color-main); }
h3 { font: 700 clamp(1.5rem, 0.88rem + 0.96vw, 1.75rem)/1.2 var(--font-sans); color: var(--text-color-main); }
h4 { font: 700 clamp(1.25rem, 0.94rem + 0.48vw, 1.375rem)/1.2 var(--font-sans); color: var(--text-color-main); }
h5 { font: 700 1.125rem/1.2 var(--font-sans); color: var(--text-color-main); }
h6 { font: 700 1rem/1.2 var(--font-sans); color: var(--text-color-main); }
p  { font: 400 1rem/1.4 var(--font-sans); color: var(--text-color-main); }
small { font-size: 0.875rem; color: var(--text-color-subtle); }
code { font-family: var(--font-mono); font-size: 0.8em; background: var(--color-grey-100); color: var(--color-grey-700); padding: 0.1em 0.3em; border-radius: var(--radius); }
blockquote { border-left: 5px solid var(--color-grey-100); padding: 10px 20px; margin: 0 0 20px; font-size: 1.25rem; }
a { color: var(--text-color-link-primary); text-decoration: none; }
a:hover { text-decoration: underline; }