/* ============================================================
   ProPhoto — Design Tokens
   Used by BOTH the Studio (Filament) and the Galleries (Livewire).
   ============================================================ */

/* -------- Google Fonts -------- */
/* Studio + default gallery sans:  Söhne-ish → Untitled Sans substitute via system; we use Geist for a crisp neutral */
/* Display for galleries: GT Sectra-ish → Fraunces avoided (slop); we commit to a quieter editorial pairing */
/* Mono for metadata: JetBrains Mono */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ====================================================
     COLOR — Shared ink scale
     Near-black, never pure black. Never pure white.
     Used identically in Studio (as default) and Galleries
     (as one of the theme palettes).
     ==================================================== */
  --ink-0:   #0D0E10;  /* deep charcoal — Studio background */
  --ink-10:  #17191C;  /* panel */
  --ink-20:  #22252A;  /* raised surface, toolbar */
  --ink-30:  #2E3238;  /* hover on dark */
  --ink-40:  #474C55;  /* disabled/muted text on dark */
  --ink-50:  #6B7280;  /* secondary text */
  --ink-60:  #8F96A1;  /* tertiary, icons-idle */
  --ink-70:  #B8BDC6;  /* borders on dark */
  --ink-80:  #D8DCE2;  /* light borders */
  --ink-90:  #EEF0F3;  /* off-white panel */
  --ink-95:  #F6F7F9;  /* lightest surface */
  --ink-100: #FAFAF8;  /* paper — warm-biased, not #fff */

  /* ====================================================
     ACCENT — Indigo-ink
     One saturated accent for focus, selection, links.
     Chosen to survive both dark and light backgrounds.
     ==================================================== */
  --accent:      #5B5BD6;
  --accent-hi:   #7879F1;  /* on dark backgrounds */
  --accent-lo:   #3E3EC9;  /* pressed */
  --accent-tint: color-mix(in oklab, var(--accent) 14%, transparent);

  /* ====================================================
     FLAG SYSTEM — matches Lightroom conventions.
     Do not substitute or remap. Photographers rely on
     this coding in their muscle memory.
     ==================================================== */
  --pick:   #3EA568;
  --reject: #D14343;
  --flag-unset: var(--ink-60);

  --label-red:    #D9463E;
  --label-yellow: #E0B341;
  --label-green:  #4EA666;
  --label-blue:   #3E7BD9;
  --label-purple: #8B5CF6;

  /* ====================================================
     STATUS — Upload / operation states
     Low-saturation so they don't fight thumbnails.
     ==================================================== */
  --ok:    #3EA568;
  --warn:  #C88A2B;
  --err:   #D14343;
  --info:  var(--accent);

  /* ====================================================
     GALLERY THEME PALETTES
     Each theme ships one "out-of-the-box" palette;
     photographers override primary/secondary via config.
     ==================================================== */

  /* Portrait — warm, skin-flattering paper */
  --portrait-bg:       #F5F0EB;  /* cream */
  --portrait-ink:      #2C1810;  /* espresso */
  --portrait-accent:   #8C6A4F;  /* umber */
  --portrait-rule:     #E8DFD4;

  /* Editorial — magazine, crisp, high contrast */
  --editorial-bg:      #FAFAF8;  /* paper */
  --editorial-ink:     #111113;
  --editorial-accent:  #B8342B;  /* printed red */
  --editorial-rule:    #E6E6E3;

  /* Architecture — cinematic, near-black */
  --architecture-bg:      #0F0F10;
  --architecture-ink:     #EDEDEA;
  --architecture-accent:  #C9A97A;  /* brass */
  --architecture-rule:    #1E1E20;

  /* ====================================================
     TYPOGRAPHY
     ==================================================== */
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif:   'Instrument Serif', 'Times New Roman', Georgia, serif;  /* gallery display */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — modular, tight at the top */
  --text-2xs: 11px;   /* row-label, keyboard chord */
  --text-xs:  12px;   /* metadata, timestamps */
  --text-sm:  13px;   /* secondary body, form hint */
  --text-md:  14px;   /* default UI body */
  --text-lg:  16px;   /* emphasized body, dialog copy */
  --text-xl:  20px;   /* subsection heading */
  --text-2xl: 26px;   /* page title */
  --text-3xl: 34px;   /* dashboard hero */
  --text-4xl: 48px;   /* gallery intro */
  --text-5xl: 72px;   /* display — galleries only */
  --text-6xl: 112px;  /* editorial cover */

  /* Leading */
  --lead-headline: 1.05;  /* single-line hero only — use when you know the string fits on one line */
  --lead-tight:    1.2;   /* display serif that may wrap — safe for Instrument Serif's deep descenders */
  --lead-snug:     1.2;   /* headings */
  --lead-normal:   1.45;  /* body */
  --lead-relaxed:  1.6;   /* long-form */

  /* Tracking */
  --track-tight:  -0.02em;  /* display */
  --track-snug:   -0.01em;  /* headings */
  --track-normal: 0;
  --track-loose:   0.04em;  /* all-caps microlabels */
  --track-wide:    0.12em;  /* editorial eyebrow */

  /* ====================================================
     STRUCTURE
     ==================================================== */
  --radius-xs: 3px;   /* chips, inline pills */
  --radius-sm: 5px;   /* inputs, buttons */
  --radius-md: 8px;   /* cards, dialogs */
  --radius-lg: 12px;  /* large surfaces */
  --radius-xl: 18px;  /* gallery cards, portrait-theme only */

  /* Borders — always computed from ink scale for theme-aware use */
  --rule-hairline: 1px solid color-mix(in oklab, currentColor 10%, transparent);
  --rule-soft:     1px solid color-mix(in oklab, currentColor 14%, transparent);
  --rule-strong:   1px solid color-mix(in oklab, currentColor 22%, transparent);

  /* Shadows — long, soft, low alpha. Almost never used. */
  --shadow-pop: 0 1px 2px rgba(0,0,0,.08), 0 6px 16px rgba(0,0,0,.10);
  --shadow-lift: 0 1px 1px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.14);
  --shadow-cinema: 0 40px 80px rgba(0,0,0,.35);  /* architecture theme lightbox */

  /* Spacing — 4pt base */
  --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-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Motion */
  --ease-studio:   cubic-bezier(0.2, 0, 0, 1);
  --ease-cinema:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast:   120ms;
  --t-normal: 180ms;
  --t-slow:   320ms;
  --t-cinema: 600ms;

  /* Layout caps */
  --studio-sidebar:   272px;
  --studio-toolbar:    56px;
  --gallery-max:     1440px;
  --gallery-text-max: 640px;
}

/* ============================================================
   Base styles — opt-in via .ds-base
   ============================================================ */
.ds-base {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lead-normal);
  color: var(--ink-10);
  background: var(--ink-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
  text-rendering: optimizeLegibility;
}

.ds-base.dark {
  color: var(--ink-90);
  background: var(--ink-0);
}

/* Utility: monospaced facts */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.caps { text-transform: uppercase; letter-spacing: var(--track-loose); font-size: var(--text-2xs); font-weight: 500; }
.eyebrow { text-transform: uppercase; letter-spacing: var(--track-wide); font-size: var(--text-xs); font-weight: 500; }