/*
 * tokens.css — Design tokens (single source of truth)
 * Grailsome Design System
 *
 * Consolidated from the original colors.css / typography.css / borders.css /
 * layout.css / animation.css :root blocks. Every custom property lives here.
 */

:root {
  /* ----- Colors — Section 2 ----- */

  /* Backgrounds */
  --color-ivory:      #FAF6EE;  /* Primary background — warm parchment */
  --color-parch:      #F0E8D4;  /* Secondary surface — slightly deeper parchment */
  --color-parch-2:    #E6DBC4;  /* Tertiary surface — card dividers, borders */
  --color-cream-card: #FDF9F0;  /* Elevated card surfaces */

  /* Ink / Text */
  --color-ink:        #1A0D08;  /* Primary text — warm near-black */
  --color-ink-2:      #3A2218;  /* Secondary text — warm dark brown */
  --color-ink-muted:  #7A5C48;  /* Tertiary / placeholder text */

  /* Brand Reds */
  --color-red:        #C0301A;  /* Primary brand red — CTAs, hero accent */
  --color-red-2:      #8C1F0E;  /* Hover/pressed state for red */
  --color-red-light:  rgba(192, 48, 26, 0.10); /* Red fill for badges, chips */

  /* Amber / Gold */
  --color-amber:      #E8960C;  /* Secondary brand — highlights, featured states */
  --color-amber-2:    #B87008;  /* Amber hover/pressed */
  --color-amber-light:rgba(232, 150, 12, 0.12); /* Amber fill for badges */

  /* Electric Blue */
  --color-electric:   #1A5FFF;  /* Tertiary accent — AI features, links */
  --color-electric-2: #0040CC;  /* Blue hover/pressed */

  /* Success / Value up */
  --color-mint:       #00A86B;  /* Positive change, value increase */
  --color-mint-light: rgba(0, 168, 107, 0.12);

  /* Dark surface (inverse) */
  --color-dark-surface:  #1A0D08; /* Same as --color-ink; used for dark cards / footer */
  --color-dark-surface-2:#2C1810; /* Elevated surface on dark */

  /* ----- Typography — Section 3 ----- */

  /* Font families */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Sora', sans-serif;
  --font-accent:  'Fraunces', serif;

  /* Marketing type scale */
  --text-hero-xl:    clamp(4.5rem, 9vw, 9.5rem);   /* Fraunces italic — hero main word */
  --text-hero-lg:    clamp(3.5rem, 7vw, 6.5rem);   /* Bebas Neue — hero pre-word */
  --text-section:    clamp(3rem, 5.5vw, 5.5rem);   /* Bebas Neue — section headings */
  --text-stat:       3.5rem;                         /* Bebas Neue — stat numbers */
  --text-feature:    1.3rem;                         /* Fraunces italic — card titles */
  --text-body-lg:    1.05rem;                        /* Sora 300 — intro paragraphs */
  --text-body:       0.9rem;                         /* Sora 300 — standard body */
  --text-label:      0.78rem;                        /* Sora 500 — labels, tags */
  --text-micro:      0.68rem;                        /* Sora 600 — eyebrow tags, ticker */

  /* iOS App type scale */
  --text-app-title:      28px;   /* Bebas Neue — screen titles */
  --text-app-section:    22px;   /* Bebas Neue — section headers in lists */
  --text-app-card-title: 18px;   /* Fraunces italic — item names on cards */
  --text-app-body:       15px;   /* Sora 400 — standard body */
  --text-app-label:      13px;   /* Sora 500 — metadata, captions */
  --text-app-micro:      11px;   /* Sora 400 — timestamps, micro-labels */

  /* ----- Spacing & layout — Section 4 ----- */

  /* Spacing scale — 8px base unit */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Content max-widths */
  --max-content: 1100px;  /* General content container */
  --max-prose:    620px;  /* Section intros, pull quotes */
  --max-narrow:   480px;  /* CTA subtitles, tight copy blocks */

  /* ----- Borders — Section 4.5 ----- */

  /* Border radii */
  --radius-card: 4px;

  /* Grailsome uses thick ink borders as a visual signature */
  --border-brand:  2.5px solid var(--color-ink);  /* Section wrappers, grid outer */
  --border-inner:  2px solid var(--color-ink);    /* Grid cell dividers */
  --border-subtle: 1.5px solid var(--color-ink);  /* Cards, inputs */
  --border-faint:  1px solid rgba(26, 13, 8, 0.10); /* Dividers, separators */

  /* ----- Motion — Section 7 ----- */

  /* Easing curves */
  --ease-brand:   cubic-bezier(0.22, 1, 0.36, 1);    /* Hero entrances, card pops */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);     /* Standard UI — menus, sheets */
  --ease-in-out:  cubic-bezier(0.45, 0, 0.55, 1);    /* Toggles, transitions */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1); /* Card flip, identification confirm (sparingly) */

  /* Duration scale */
  --duration-fast:   120ms;  /* Hover states, ripples */
  --duration-medium: 250ms;  /* Button press, badge appear */
  --duration-normal: 400ms;  /* Card transitions, sheet open */
  --duration-slow:   650ms;  /* Page section reveals */
  --duration-crawl:  900ms;  /* Hero entrance stagger */
}