/* ==========================================================================
   FROZEN COPY of brand/tokens.css — generated 2026-08-06, regenerated
   2026-09-25 to adopt the bronze (primary) and papaya (secondary) accents.
   Do not hand-edit.
   The order sheet tool is self-contained by design and must not change when the
   brand changes. To adopt a brand update, regenerate this file deliberately.
   Canonical source: Claude Rida/brand/tokens.css
   ========================================================================== */

/* ==========================================================================
   RIDA CREATION — DESIGN TOKENS
   Direction A "Seal" · v1.0 · 2026-07-27
   --------------------------------------------------------------------------
   This file is the single source of truth for the visual system.
   Change a value here and it changes everywhere. Do not hardcode a colour,
   a font size, or a spacing value anywhere else.
   Mirror of: tokens.json
   ========================================================================== */

/* --- Typefaces (Google Fonts) ---------------------------------------------
   Cinzel:  https://fonts.google.com/specimen/Cinzel   — weights 400 500 600
   Figtree: https://fonts.google.com/specimen/Figtree  — weights 300 400 500 600
   Embed:
   @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Figtree:wght@300;400;500;600&display=swap');
--------------------------------------------------------------------------- */

:root {

  /* ======================================================================
     1. COLOUR
     Monochrome, warm-shifted. Ink derived from the emblem's own #281C00.
     Contrast ratios stated against --paper.
     ====================================================================== */

  --ink:            #241C10;  /* 15.86:1 AAA — primary text, headlines, the crest */
  --ink-secondary:  #5A5145;  /*  7.34:1 AAA — body text, sub-headings */
  --ink-tertiary:   #6E6559;  /*  5.40:1 AA  — meta, captions, spec labels. Floor for text. */
  --ink-muted:      #8A8175;  /*  3.61:1     — NON-TEXT ONLY. Ornament, dividers, disabled. */

  --paper:          #FAF8F4;  /* page ground */
  --paper-sunk:     #F2EEE6;  /* recessed panels, table stripes, image placeholders */
  --line:           #E3DED4;  /* all 1px rules and borders */
  --line-strong:    #C9C1B2;  /* emphasis rules only — section breaks, table heads */

  /* Inverse — dark sections, seals, certificate grounds */
  --ink-inverse-bg:        #241C10;
  --paper-on-ink:          #FAF8F4;  /* 15.86:1 AAA */
  --paper-on-ink-secondary:#D9D2C6;  /* 11.20:1 AAA */
  --paper-on-ink-tertiary: #B5AC9D;  /*  7.49:1 AAA */

  /* Accents — see BRAND.md §5.3. Joe, 25 Sep 2026: bronze is the primary
     accent, papaya the secondary. Bronze was the Rida Portal's own accent
     (app.css) since before this date and moved here the same day. */
  --accent-bronze:  #8B5E34;  /*  5.28:1 AA — primary accent. Titles, active states, primary buttons. */
  /* Papaya — secondary, minimal: small marks and moments of motion, never a
     surface or a fill. */
  --papaya:         #E8702A;  /*  2.92:1 — NON-TEXT ONLY. Marks, indicators, motion. */
  --papaya-deep:    #B24E18;  /*  4.95:1 AA — the only papaya that may carry text, sparingly. */

  /* Status — used only in internal tools and forms. Never client-facing decoration. */
  --status-error:   #8C3A2C;
  --status-success: #3F5C42;

  /* ======================================================================
     2. TYPOGRAPHY
     Cinzel = display only, ALL CAPS, never below 13px, never running text.
     Figtree = everything else.
     Cinzel has NO italic. For emphasis use Figtree italic or letterspaced caps.
     ====================================================================== */

  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-text:    'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --weight-display:        400;
  --weight-display-strong: 500;
  --weight-light:          300;
  --weight-regular:        400;
  --weight-medium:         500;
  --weight-semibold:       600;

  /* --- Display scale (Cinzel, uppercase) --- */
  --display-1-size:    clamp(2.375rem, 1.4rem + 3.6vw, 3.875rem); /* 38 → 62px */
  --display-1-tracking: 0.09em;
  --display-1-leading:  1.28;

  --display-2-size:    clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem);  /* 28 → 42px */
  --display-2-tracking: 0.10em;
  --display-2-leading:  1.30;

  --display-3-size:    1.5rem;    /* 24px */
  --display-3-tracking: 0.12em;
  --display-3-leading:  1.35;

  --title-size:        1.0625rem; /* 17px — smallest Cinzel that holds */
  --title-tracking:    0.16em;
  --title-leading:     1.40;

  --wordmark-tracking: 0.22em;    /* "RIDA CREATION" set in Cinzel */

  /* --- Text scale (Figtree) --- */
  --body-lg-size:    1.0625rem;  /* 17px — intros, lede paragraphs */
  --body-lg-leading: 1.75;

  --body-size:       0.9375rem;  /* 15px — default running text */
  --body-leading:    1.75;

  --body-sm-size:    0.8125rem;  /* 13px — secondary text, form help */
  --body-sm-leading: 1.65;

  --caption-size:    0.75rem;    /* 12px — image captions, footnotes */
  --caption-leading: 1.55;

  /* --- Utility text (Figtree, uppercase, tracked) --- */
  --overline-size:     0.625rem; /* 10px — section labels above a heading */
  --overline-tracking: 0.22em;
  --overline-weight:   600;

  --meta-size:         0.625rem; /* 10px — carat, origin, lab, certification */
  --meta-tracking:     0.18em;
  --meta-weight:       600;

  --nav-size:          0.65625rem; /* 10.5px */
  --nav-tracking:      0.16em;

  --button-size:       0.6875rem; /* 11px */
  --button-tracking:   0.16em;
  --button-weight:     500;

  /* Measure — never exceed. Long lines read as cheap. */
  --measure:       62ch;
  --measure-tight: 46ch;

  /* ======================================================================
     3. SPACING — 4px base
     ====================================================================== */

  --space-1:   0.25rem;  /*   4px */
  --space-2:   0.5rem;   /*   8px */
  --space-3:   0.75rem;  /*  12px */
  --space-4:   1rem;     /*  16px */
  --space-5:   1.5rem;   /*  24px */
  --space-6:   2rem;     /*  32px */
  --space-7:   3rem;     /*  48px */
  --space-8:   4rem;     /*  64px */
  --space-9:   6rem;     /*  96px */
  --space-10:  8rem;     /* 128px */
  --space-11: 12rem;     /* 192px */

  /* Section rhythm — the generosity IS the luxury signal. Do not tighten. */
  --section-y:        clamp(4rem, 8vw, 8rem);    /*  64 → 128px */
  --section-y-major:  clamp(6rem, 12vw, 12rem);  /*  96 → 192px */

  /* ======================================================================
     4. LAYOUT
     ====================================================================== */

  --container-max:      1280px;
  --container-narrow:   840px;   /* editorial / long-form pages */
  --gutter:             clamp(1.25rem, 4vw, 4rem); /* 20 → 64px */
  --grid-columns:       12;
  --grid-gap:           clamp(1rem, 2vw, 2rem);

  /* ======================================================================
     5. BORDERS, SHAPE, ELEVATION
     No shadows. Radius zero only for the seal/monogram frame — that mark
     stays sharp always. Everything else, Joe's call 18 Sep 2026 (widened
     same day): buttons, cards/panels/tiles, dialogs, text fields,
     chips/pills and image frames use --radius-lg with a true
     continuous-curvature corner (corner-shape: squircle, below) — not a
     plain circular border-radius.
     ====================================================================== */

  --border-width:        1px;
  --border-width-strong: 2px;
  --radius:              0;  /* the seal/monogram frame only */
  --radius-lg:           16px;  /* everything else — buttons, cards, fields, chips, image frames */
  --corner-shape:         squircle; /* Chrome/Edge only today; unsupported browsers render a plain round corner */
  --shadow:              none;

  /* ======================================================================
     6. MOTION — restrained. Nothing bounces, nothing slides far.
     ====================================================================== */

  --ease:              cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast:     160ms;
  --duration:          240ms;
  --duration-reveal:   480ms;  /* image fade-in on scroll */
  --hover-opacity:     0.62;

  /* ======================================================================
     7. IMAGERY
     ====================================================================== */

  --ratio-hero:      16 / 9;
  --ratio-card:      4 / 5;   /* stone cards — portrait */
  --ratio-square:    1 / 1;   /* Instagram grid, avatars */
  --ratio-editorial: 3 / 2;
  --image-placeholder: var(--paper-sunk);

  /* ======================================================================
     8. LOGO SIZING — see BRAND.md for the full usage rules
     ====================================================================== */

  --monogram-nav:      30px;  /* working mark — nav, headers */
  --monogram-min:      24px;  /* absolute floor */
  --crest-hero:        70px;
  --crest-seal:       110px;  /* certificates */
  --crest-min:         56px;  /* below this it degrades — use the monogram */
}

/* --------------------------------------------------------------------------
   BASE — apply to any Rida surface (web page, HTML doc, exported PDF)
   -------------------------------------------------------------------------- */

.rida {
  background: var(--paper);
  color: var(--ink-secondary);
  font-family: var(--font-text);
  font-weight: var(--weight-light);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.rida *,
.rida *::before,
.rida *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  .rida *, .rida *::before, .rida *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}