/* Prine — design tokens
 * Source of truth for the whole system. tokens.json and tailwind.config.js
 * are generated from this file; if you change a value, change it here.
 * Reference: Prine Brand Guidelines v1.0 (2026).
 */

:root {
  /* ---------------------------------------------------------- palette -- */
  --prine-black:    #000000;   /* primary — backgrounds, ink               */
  --prine-gold:     #F9C701;   /* primary accent — highlights only         */
  --prine-white:    #FFFFFF;

  --prine-ink:      #1A1A1A;   /* raised surfaces on black                 */
  --prine-graphite: #4D4D4D;   /* secondary text on light                  */
  --prine-mist:     #B3B3B3;   /* secondary text on black                  */
  --prine-cloud:    #ECECEC;   /* hairlines, dividers on light             */
  --prine-cream:    #FAF8F2;   /* light page background                    */
  --prine-amber:    #C99A00;   /* darker gold — large display on light     */

  /* ------------------------------------------------- semantic (dark) --- */
  /* Dark is the default. Lead with black, let gold do the pointing.        */
  --bg:             var(--prine-black);
  --bg-raised:      var(--prine-ink);
  --text:           var(--prine-white);
  --text-muted:     var(--prine-mist);
  --accent:         var(--prine-gold);
  --accent-text:    var(--prine-black);   /* text ON gold                   */
  --border:         #262626;
  --link:           var(--prine-gold);
  --link-hover:     var(--prine-white);
  --focus-ring:     var(--prine-gold);

  /* ------------------------------------------------------- typography -- */
  --font-display: 'Comfortaa', 'Century Gothic', 'Trebuchet MS', sans-serif;
  --font-body:    'Poppins', 'Calibri', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Admin-editable multiplier (Theme screen's "Type scale") — every fluid
     size below is wrapped in calc(var(--type-scale) * ...) so scaling stays
     proportional at every viewport width instead of just at the extremes. */
  --type-scale: 1;

  /* fluid scale — min at 360px viewport, max at 1440px */
  --text-display: calc(var(--type-scale) * clamp(2.75rem, 1.6rem + 5.1vw, 6rem));
  --text-h1:      calc(var(--type-scale) * clamp(2.125rem, 1.4rem + 3.1vw, 4rem));
  --text-h2:      calc(var(--type-scale) * clamp(1.625rem, 1.2rem + 1.9vw, 2.75rem));
  --text-h3:      calc(var(--type-scale) * clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem));
  --text-subhead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-body:    1rem;
  --text-small:   0.875rem;
  --text-caption: 0.75rem;

  --leading-tight:   1.05;   /* display                                    */
  --leading-snug:    1.2;    /* headings                                   */
  --leading-normal:  1.6;    /* body                                       */
  --leading-relaxed: 1.75;   /* long form                                  */

  --tracking-display: -0.02em;
  --tracking-normal:  0;
  --tracking-caption: 0.15em;   /* labels & metadata, per the guide        */

  /* ---------------------------------------------------------- spacing -- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;
  --space-11: 12rem;

  /* ----------------------------------------------------------- layout -- */
  --container:      1200px;
  --container-wide: 1440px;
  --container-text: 68ch;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  /* ----------------------------------------------------------- shapes -- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  --rule-thin:  1px;
  --rule:       4px;    /* the gold underline device                       */
  --rule-thick: 8px;

  /* ---------------------------------------------------------- effects -- */
  /* Never apply a shadow to the logo. These are for UI surfaces only.      */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.30);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 12px 40px rgb(0 0 0 / 0.45);
  --glow-gold: 0 0 0 3px rgb(249 199 1 / 0.35);

  --duration-fast: 120ms;
  --duration:      200ms;
  --duration-slow: 400ms;
  --ease:          cubic-bezier(0.2, 0, 0, 1);

  /* ------------------------------------------------------------- logo -- */
  /* Clear space X = the height of the bowl of the 'p' = 0.167 x the width
     of the full lock-up. Keep this zone free of type, images and edges.    */
  --logo-clear-space: 0.167;
  --logo-min-width:   100px;   /* below this, use the wordmark-only file    */
  --logo-height-header: 32px;
  --logo-height-footer: 28px;
}

/* Light ground. Note: gold TEXT is not used here — the guide rules it out
   ("gold text on white does not work"), and amber on cream only reaches
   2.4:1. Gold does its pointing through rules and bars instead. */
[data-theme='light'] {
  --bg:          var(--prine-cream);
  --bg-raised:   var(--prine-white);
  --text:        var(--prine-black);
  --text-muted:  var(--prine-graphite);
  --accent:      var(--prine-gold);
  --accent-text: var(--prine-black);
  --border:      var(--prine-cloud);
  --link:        var(--prine-black);
  --link-hover:  var(--prine-amber);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration: 0ms; --duration-slow: 0ms; }
}

/* Organic "blob" frame for hero imagery — an asymmetric border-radius rather
   than a plain rectangle, finished with a gold ring so it reads as a Prine
   device (not a copy of any stock template's photo treatment). */
.blob-frame {
  border-radius: 63% 37% 54% 46% / 43% 37% 63% 57%;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent), var(--shadow-lg);
}