/* ─────────────────────────────────────────────────────────────────────────────
   DESIGN TOKENS — the one place to restyle the site

   Every color, font, type size, weight, line height, letter spacing, spacing
   value and layout size used by main.css, photo.css and contact.css is defined
   here. Change a value here and it applies site-wide.

   Not tokenized on purpose: 1px/2px hairline border widths, structural values
   (0, 100%, auto, 1fr, column counts, aspect ratios), opacity on hover effects,
   and em-based micro-alignment nudges (drop cap and ¶ anchor offsets).

   Breakpoints can't be custom properties (CSS doesn't allow var() in @media).
   The site uses: 640px, 768px (and max-width 767px), 900px, 1024px.

   Fonts: the font files are loaded only by fonts.css, which is generated by
   scripts/download_fonts.py. To change typefaces, edit FAMILIES in that
   script, re-run it, then update the --font-* stacks below.

   Outside CSS: the browser theme-color in templates/base.html and the colors
   in site.webmanifest (realityframed/renderer.py) repeat --color-bg values.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Colors ─────────────────────────────────────────────────────────────── */
  --color-bg:            #FAFAF8;
  --color-bg-warm:       #F8F6F1;
  --color-text:          #1A1A1A;
  --color-text-muted:    #6B6560;
  --color-text-faint:    #9C9690;
  --color-accent:        #3D3530;
  --color-accent-hover:  #1A1A1A;
  --color-rule:          #D4D0C8;
  --color-footer-bg:     #1C1C1C;
  --color-footer-text:   #E8E4DC;
  --color-footer-muted:  #8A8580;
  --color-footer-rule:   rgba(255, 255, 255, 0.08);

  --color-success-border: #4B7A52;
  --color-success-bg:     #EEF3EC;
  --color-success-text:   #2F4E33;
  --color-info-border:    #4A6B7A;
  --color-info-bg:        #EAF0F2;
  --color-info-text:      #2C4652;
  --color-warning-border: #A6762E;
  --color-warning-bg:     #FAF1E1;
  --color-warning-text:   #6B4B1D;
  --color-danger-border:  #A03E3E;
  --color-danger-bg:      #F8EAEA;
  --color-danger-text:    #6B2A2A;

  --color-highlight:        #FEF3C0;               /* flash on a linked paragraph (p:target) */
  --color-on-photo:         #FFFFFF;               /* text drawn over photos */
  --color-photo-label-bg:   rgba(0, 0, 0, 0.55);   /* backing for text over photos */
  --color-lightbox-backdrop: rgba(0, 0, 0, 0.92);
  --color-lightbox-control: rgba(255, 255, 255, 0.7);
  --color-lightbox-control-hover: #FFFFFF;
  --shadow-menu:            0 4px 16px rgba(0, 0, 0, 0.1);

  /* ── Font families (files loaded by fonts.css) ──────────────────────────── */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-ui:      'DM Sans', system-ui, -apple-system, sans-serif;
  --font-brand:   'Open Sans', system-ui, -apple-system, sans-serif;

  /* ── Type scale (rem; 1rem = --font-size-root) ──────────────────────────── */
  --font-size-root: 16px;
  --text-5xs:  0.625rem;   /* 10px */
  --text-4xs:  0.6875rem;  /* 11px */
  --text-3xs:  0.75rem;    /* 12px */
  --text-2xs:  0.8125rem;  /* 13px */
  --text-xs:   0.875rem;   /* 14px */
  --text-sm:   0.9375rem;  /* 15px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.0625rem;  /* 17px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.625rem;   /* 26px */

  /* Type roles */
  --text-body:          var(--text-lg);                     /* page default */
  --text-prose:         var(--text-xl);                     /* article and photo-story paragraphs */
  --text-h1:            clamp(2.25rem, 5vw, 4rem);
  --text-h2:            clamp(1.75rem, 3.5vw, 2.75rem);
  --text-h3:            clamp(1.375rem, 2.5vw, 1.875rem);
  --text-photo-title:   clamp(2rem, 5vw, 4rem);
  --text-404:           clamp(4rem, 15vw, 10rem);
  --text-section-label: clamp(0.875rem, 2vw, 1rem);         /* small caps section headings */
  --text-dropcap:       4em;
  --text-para-anchor:   0.875em;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Line heights */
  --leading-dropcap:  0.72;
  --leading-none:     1;
  --leading-display:  1.05;   /* photo titles */
  --leading-heading:  1.15;
  --leading-tight:    1.25;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.6;
  --leading-prose:    1.65;
  --leading-body:     1.75;

  /* Letter spacing */
  --tracking-display:    -0.02em;
  --tracking-heading:    -0.01em;
  --tracking-slight:     0.04em;
  --tracking-wide:       0.05em;
  --tracking-wider:      0.08em;
  --tracking-caps:       0.1em;
  --tracking-caps-wide:  0.12em;
  --tracking-caps-wider: 0.15em;

  /* Text rhythm (em, relative to the element's own size) */
  --heading-gap:           0.5em;    /* below headings */
  --paragraph-gap:         1.25em;   /* below paragraphs */
  --paragraph-gap-story:   1.4em;    /* photo story paragraphs */
  --paragraph-gap-tight:   0.75em;   /* photo announcement boxes */
  --paragraph-gap-sidebar: 1em;      /* static page sidebar */
  --flow-gap:              1.5em;    /* between blocks in article/page content */
  --list-indent:           1.5em;

  /* Links and focus */
  --underline-offset:       2px;
  --underline-offset-loose: 3px;
  --underline-thickness:    1px;
  --focus-ring-width:       2px;
  --focus-ring-offset:      3px;

  /* ── Spacing ────────────────────────────────────────────────────────────── */
  --space-4xs:   0.125rem;   /* 2px */
  --space-3xs:   0.25rem;    /* 4px */
  --space-xs:    0.375rem;
  --space-sm:    0.75rem;
  --space-md:    1.5rem;
  --space-lg:    3rem;
  --space-xl:    5rem;
  --space-2xl:   8rem;

  /* ── Layout widths ──────────────────────────────────────────────────────── */
  --max-content:      700px;     /* .container--prose / --narrow */
  --max-photo:        1200px;    /* .container--wide */
  --max-site:         1400px;
  --max-page:         920px;     /* prose column on photo, post, archive, project, changelog pages */
  --max-page-404:     720px;
  --max-post-list:    800px;
  --max-calendar:     900px;
  --max-contact:      36rem;
  --measure:          60ch;      /* intro/description text */
  --photo-max-landscape: 900px;  /* single photo page */
  --photo-max-portrait:  650px;
  --sidebar-width:    240px;

  /* Image heights */
  --hero-height:            65vh;   /* project/collection feature image */
  --splash-max-height:      70vh;   /* home page photo */
  --daily-hero-max-height:  80vh;   /* Everyday latest photo */
  --lightbox-max-width:     95vw;
  --lightbox-max-height:    95vh;

  /* Grids */
  --grid-min-related:     220px;
  --daily-grid-min:       160px;
  --daily-grid-min-small: 120px;

  /* ── Components ─────────────────────────────────────────────────────────── */
  --radius:               2px;
  --tap-target:           44px;      /* minimum touch target */
  --nav-toggle-size:      40px;
  --nav-toggle-padding:   8px;
  --nav-toggle-gap:       5px;
  --nav-toggle-bar-width: 20px;
  --nav-toggle-bar-height: 1.5px;
  --submenu-min-width:    11rem;
  --footer-icon-size:     48px;
  --footer-icon-radius:   10px;
  --chip-padding:         2px 10px;  /* tag and project/collection chips */
  --button-padding:       0.5rem 1.25rem;
  --button-padding-wide:  0.5rem 1.5rem;
  --input-padding:        0.5rem 0.75rem;
  --exif-label-min-width: 170px;
  --changelog-badge-width: 4.5rem;
  --date-label-padding:   0 0.3em;   /* day number over calendar photos */
  --details-indent:       1.25em;    /* EXIF details body */
  --anchor-offset:        5rem;      /* scroll margin for #anchors under the header */

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --ease:          cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration:      220ms;
  --duration-fast: 0.15s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:            #161614;
    --color-bg-warm:       #1C1B18;
    --color-text:          #E8E4DC;
    --color-text-muted:    #9C9690;
    --color-text-faint:    #6B6560;
    --color-accent:        #C8C0B4;
    --color-accent-hover:  #E8E4DC;
    --color-rule:          #2E2C28;
    --color-footer-bg:     #0E0E0C;
    --color-footer-text:   #E8E4DC;
    --color-footer-muted:  #6B6560;

    --color-success-border: #6FA377;
    --color-success-bg:     #1E2A1F;
    --color-success-text:   #A8CBAD;
    --color-info-border:    #6E97A8;
    --color-info-bg:        #1B2427;
    --color-info-text:      #A9C7D2;
    --color-warning-border: #C99A4E;
    --color-warning-bg:     #2A2218;
    --color-warning-text:   #E0BD84;
    --color-danger-border:  #C46A6A;
    --color-danger-bg:      #2A1B1B;
    --color-danger-text:    #E0A6A6;
  }
}