/* Tuber — Platypus Economics brand tokens */
:root {
  /* Brand colors — bases (BrandAssets/_Assets/Deck/InitialDigital_PlatypusEconomics_Branding_02.pdf) */
  --abyss:     #0E4A53;
  --surf:      #2F9E97;
  --surf-mid:  #16A7B4; /* historical alias — actually Abyss-tint per the brand deck */
  --surf-tint: #A8ECEF; /* historical alias — actually Abyss-light per the brand deck */
  --sun:       #D9A315;
  --coral:     #D93A43;
  --algae:     #006B2E;
  --orchid:    #8E4AA0;

  /* Brand colors — tints. The Mid row is the highlight palette used in the
     YT Thumbnail concepts (BrandAssets/YT Thumbnails/01_Platypus_YT-Thumb_Concept_*.jpg).
     The Light row is the pastel fill palette. */
  --abyss-bright:  #16A7B4;
  --surf-bright:   #00FFF0;
  --sun-bright:    #FFC325;
  --coral-bright:  #FF5A64;
  --algae-bright:  #52FF8F;
  --orchid-bright: #B36AC7;
  --abyss-light:   #A8ECEF;
  --surf-light:    #CCFFFB;
  --sun-light:     #FFD966;
  --coral-light:   #FF9AA0;
  --algae-light:   #A6FFC5;
  --orchid-light:  #E2B8EE;

  /* Greys */
  --ink:    #0B0B0A;
  --ink-low: #3A3A38;
  --shell:  #FFFFFF;
  --paper:  #FFFFFF;
  --canvas: #F4F2EC;
  --border: #E4E0D6;
  --muted:  #777;
  --muted-bg: #EFECDF;

  /* Six-color brand stripe — used on hero/footer rules */
  --brand-stripe: linear-gradient(90deg,
    var(--surf)   0%       16.66%,
    var(--sun)    16.66%   33.33%,
    var(--coral)  33.33%   50%,
    var(--algae)  50%      66.66%,
    var(--orchid) 66.66%   83.33%,
    var(--abyss)  83.33%   100%);

  /* Variant accents (drives the three thumbnail cards). Use the bright tints —
     the rendered thumbnails do too, so the picker chip and the composed
     thumbnail show the same colour. */
  --variant-a: var(--sun-bright);
  --variant-b: var(--surf-bright);
  --variant-c: var(--algae-bright);

  /* Typography. GC Sublime is the brand display face per the deck (page 7) and
     the YT Thumbnail Concepts. Helvetica Neue LT Std is kept in the stack as a
     fallback for hosts where the GC Sublime webfont fails to load. */
  --font-display: 'GC Sublime', 'Helvetica Neue LT Std', 'Bebas Neue', 'Anton', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 28px rgba(0,0,0,0.12);
}

/* Webfont declarations — only used when the OTFs are present in /fonts */
@font-face {
  font-family: 'GC Sublime';
  src: url('../fonts/Sublime.ttf') format('truetype');
  font-weight: 100 900; /* one upright cut; let the browser cover all weights */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue LT Std';
  src: url('../fonts/HelveticaNeueLTStd-HvCnO.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue LT Std';
  src: url('../fonts/HelveticaNeueLTStd-HvCn.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}