/**
 * DESIGN TOKENS
 * Photo Portfolio — Design System v1.0
 * Generated: 2026-03-19
 *
 * Source of truth for all visual decisions.
 * Import this file first in any stylesheet.
 */

:root {

  /* ============================================================
     COLOR — PRIMITIVES
     Raw values. Never reference these directly in components.
     Use the semantic aliases below instead.
  ============================================================ */

  --color-black-true:   #000000;
  --color-black-site:   #0a0a0a;   /* primary background */
  --color-black-card:   #0f0f0f;   /* elevated surface */
  --color-black-border: #1a1a1a;   /* subtle border */
  --color-black-hover:  #141414;   /* hover state surface */

  --color-white-warm:   #f0ece4;   /* primary text */
  --color-white-cool:   #f5f5f5;   /* alternate */

  --color-grey-100:     rgba(240, 236, 228, 0.08);
  --color-grey-200:     rgba(240, 236, 228, 0.12);
  --color-grey-300:     rgba(240, 236, 228, 0.20);
  --color-grey-400:     rgba(240, 236, 228, 0.35);
  --color-grey-500:     rgba(240, 236, 228, 0.55);
  --color-grey-600:     rgba(240, 236, 228, 0.70);
  --color-grey-700:     rgba(240, 236, 228, 0.85);

  --color-gold-soft:    #c8a96e;   /* warm amber accent */
  --color-gold-bright:  #d4b483;
  --color-gold-dim:     #a8894e;

  /* ============================================================
     COLOR — SEMANTIC ALIASES
     These are the tokens components should reference.
  ============================================================ */

  /* Backgrounds */
  --bg-primary:         var(--color-black-site);
  --bg-surface:         var(--color-black-card);
  --bg-overlay:         rgba(0, 0, 0, 0.92);
  --bg-overlay-light:   rgba(0, 0, 0, 0.60);

  /* Text */
  --text-primary:       var(--color-white-warm);
  --text-secondary:     var(--color-grey-500);
  --text-tertiary:      var(--color-grey-400);
  --text-disabled:      var(--color-grey-300);

  /* Borders */
  --border-subtle:      var(--color-black-border);
  --border-light:       var(--color-grey-200);
  --border-mid:         var(--color-grey-300);
  --border-visible:     var(--color-grey-400);

  /* Accent */
  --accent:             var(--color-gold-soft);
  --accent-bright:      var(--color-gold-bright);
  --accent-dim:         var(--color-gold-dim);

  /* ============================================================
     TYPOGRAPHY — FAMILIES
  ============================================================ */

  --font-display:       'Cormorant Garamond', Georgia, serif;
  --font-body:          'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:          'JetBrains Mono', 'Courier New', monospace;

  /* ============================================================
     TYPOGRAPHY — SCALE
     Using clamp() for fluid type. Format: clamp(min, fluid, max)
  ============================================================ */

  /* Display / Hero */
  --text-hero:          clamp(3.5rem, 9vw, 8rem);     /* h1 hero */
  --text-display:       clamp(2.5rem, 6vw, 5.5rem);   /* h1 standard */
  --text-title:         clamp(1.8rem, 4vw, 3.5rem);   /* h2 */
  --text-subtitle:      clamp(1.2rem, 2.5vw, 2rem);   /* h3 */
  --text-heading:       clamp(1rem, 1.8vw, 1.4rem);   /* h4 */

  /* Body */
  --text-body-lg:       1.0625rem;   /* 17px — longer reads */
  --text-body:          0.9375rem;   /* 15px — default body */
  --text-body-sm:       0.875rem;    /* 14px — secondary content */

  /* UI */
  --text-label:         0.6875rem;   /* 11px — caps labels */
  --text-caption:       0.75rem;     /* 12px — captions */
  --text-nav:           0.8125rem;   /* 13px — nav links */

  /* ============================================================
     TYPOGRAPHY — WEIGHTS
  ============================================================ */

  --weight-thin:        100;
  --weight-light:       300;
  --weight-regular:     400;
  --weight-medium:      500;

  /* ============================================================
     TYPOGRAPHY — LINE HEIGHT
  ============================================================ */

  --leading-tight:      1.0;
  --leading-snug:       1.2;
  --leading-normal:     1.5;
  --leading-relaxed:    1.75;
  --leading-loose:      1.9;

  /* ============================================================
     TYPOGRAPHY — LETTER SPACING
  ============================================================ */

  --tracking-tight:     -0.03em;
  --tracking-snug:      -0.01em;
  --tracking-normal:    0em;
  --tracking-wide:      0.08em;
  --tracking-wider:     0.14em;
  --tracking-widest:    0.22em;

  /* ============================================================
     SPACING — BASE SCALE (8px grid)
  ============================================================ */

  --space-1:    0.25rem;    /*  4px */
  --space-2:    0.5rem;     /*  8px */
  --space-3:    0.75rem;    /* 12px */
  --space-4:    1rem;       /* 16px */
  --space-5:    1.25rem;    /* 20px */
  --space-6:    1.5rem;     /* 24px */
  --space-8:    2rem;       /* 32px */
  --space-10:   2.5rem;     /* 40px */
  --space-12:   3rem;       /* 48px */
  --space-16:   4rem;       /* 64px */
  --space-20:   5rem;       /* 80px */
  --space-24:   6rem;       /* 96px */
  --space-32:   8rem;       /* 128px */
  --space-40:   10rem;      /* 160px */
  --space-48:   12rem;      /* 192px */

  /* ============================================================
     SPACING — SEMANTIC
  ============================================================ */

  --gap-gallery-tight:  3px;         /* image grid gap (editorial) */
  --gap-gallery:        4px;         /* standard gallery gap */
  --gap-gallery-loose:  var(--space-2);

  --padding-nav-x:      var(--space-8);
  --padding-nav-y:      var(--space-5);
  --padding-section-x:  var(--space-8);
  --padding-section-y:  var(--space-24);
  --padding-card:       var(--space-6);

  --max-width-content:  1440px;
  --max-width-text:     55ch;
  --max-width-caption:  42ch;

  /* ============================================================
     BORDERS & RADIUS
  ============================================================ */

  --radius-none:    0;
  --radius-sm:      2px;
  --radius-md:      4px;
  --radius-full:    9999px;

  --border-width:   1px;

  /* ============================================================
     SHADOWS
  ============================================================ */

  /* Avoid drop shadows on text and cards — use these sparingly */
  --shadow-image:   0 4px 40px rgba(0, 0, 0, 0.6);
  --shadow-modal:   0 8px 80px rgba(0, 0, 0, 0.9);

  /* ============================================================
     MOTION — EASING
  ============================================================ */

  --ease-standard:  cubic-bezier(0.25, 0.46, 0.45, 0.94);   /* smooth decel */
  --ease-enter:     cubic-bezier(0.0,  0.0,  0.2,  1.0);    /* material enter */
  --ease-exit:      cubic-bezier(0.4,  0.0,  1.0,  1.0);    /* material exit */
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1.0);    /* gentle spring */
  --ease-linear:    linear;

  /* ============================================================
     MOTION — DURATION
  ============================================================ */

  --duration-instant:   80ms;
  --duration-fast:      160ms;
  --duration-normal:    300ms;
  --duration-slow:      500ms;
  --duration-cinematic: 700ms;
  --duration-enter:     800ms;

  /* ============================================================
     MOTION — TRANSITIONS (pre-composed)
  ============================================================ */

  --transition-color:   color var(--duration-normal) var(--ease-standard);
  --transition-opacity: opacity var(--duration-slow) var(--ease-standard);
  --transition-image:   transform var(--duration-cinematic) var(--ease-standard),
                        filter var(--duration-slow) var(--ease-standard);
  --transition-border:  border-color var(--duration-normal) var(--ease-standard);
  --transition-ui:      all var(--duration-fast) var(--ease-standard);

  /* ============================================================
     LAYOUT — Z-INDEX SCALE
  ============================================================ */

  --z-below:      -1;
  --z-base:        0;
  --z-raised:     10;
  --z-gallery:    20;
  --z-sticky:    100;
  --z-nav:       200;
  --z-lightbox:  500;
  --z-cursor:   9999;

  /* ============================================================
     LAYOUT — BREAKPOINTS (reference only — use in @media)
  ============================================================ */

  /* --bp-sm:  480px  */
  /* --bp-md:  768px  */
  /* --bp-lg:  1024px */
  /* --bp-xl:  1280px */
  /* --bp-2xl: 1440px */

  /* ============================================================
     GALLERY — COLUMN CONFIGS
  ============================================================ */

  --gallery-cols-mobile:    repeat(2, 1fr);
  --gallery-cols-tablet:    repeat(3, 1fr);
  --gallery-cols-desktop:   repeat(4, 1fr);
  --gallery-cols-wide:      repeat(5, 1fr);

}

/* ============================================================
   DARK / LIGHT THEME OVERRIDE
   Applied when user toggles to Light mode.
   Keep overrides minimal — this is primarily a dark-theme design.
============================================================ */

[data-theme="light"] {
  --bg-primary:       #f5f3ef;
  --bg-surface:       #ede9e3;
  --text-primary:     #0a0a0a;
  --text-secondary:   rgba(10, 10, 10, 0.55);
  --text-tertiary:    rgba(10, 10, 10, 0.40);
  --border-subtle:    rgba(10, 10, 10, 0.08);
  --border-light:     rgba(10, 10, 10, 0.12);
  --border-mid:       rgba(10, 10, 10, 0.20);
  --border-visible:   rgba(10, 10, 10, 0.35);
}