/* ============================================================
   WAIDN — Design Tokens
   Single source of truth. Never hardcode a colour/font/space
   value outside this file. Loaded FIRST, always.
   ============================================================ */

:root {
  /* --- Primary brand colours --- */
  --color-brand-primary:     #185FA5;
  --color-brand-dark:        #042C53;
  --color-brand-mid:         #378ADD;
  --color-brand-light:       #E6F1FB;
  --color-brand-lightest:    #B5D4F4;

  /* --- Semantic colours --- */
  --color-success-bg:        #EAF3DE;
  --color-success-text:      #27500A;
  --color-success-border:    #97C459;

  --color-warning-bg:        #FAEEDA;
  --color-warning-text:      #633806;
  --color-warning-border:    #EF9F27;

  --color-danger-bg:         #FCEBEB;
  --color-danger-text:       #791F1F;
  --color-danger-border:     #F09595;

  --color-info-bg:           #E6F1FB;
  --color-info-text:         #0C447C;
  --color-info-border:       #85B7EB;

  --color-tip-bg:            #EEEDFE;
  --color-tip-text:          #3C3489;
  --color-tip-border:        #AFA9EC;

  /* --- Neutral / surface --- */
  --color-surface-white:     #FFFFFF;
  --color-surface-page:      #F8F9FA;
  --color-surface-secondary: #F1EFE8;
  --color-surface-tertiary:  #E8E6DE;

  --color-text-primary:      #1A1A1A;
  --color-text-secondary:    #5F5E5A;
  --color-text-tertiary:     #888780;

  --color-border-default:    rgba(0,0,0,0.10);
  --color-border-medium:     rgba(0,0,0,0.18);
  --color-border-strong:     rgba(0,0,0,0.28);

  /* --- Fonts --- */
  --font-display:  'Sora', sans-serif;
  --font-body:     'Source Serif 4', serif;
  --font-ui:       'DM Sans', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  /* --- Type scale --- */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   38px;
  --text-hero:  48px;

  /* --- Font weights --- */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;

  /* --- Line heights --- */
  --leading-tight:    1.25;
  --leading-snug:     1.4;
  --leading-normal:   1.6;
  --leading-relaxed:  1.75;

  /* --- Spacing scale --- */
  --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;

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

  /* --- Shadows (flat-first; elevation only) --- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.07);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.10);

  /* --- Layout & grid --- */
  --max-width-content:  760px;
  --max-width-wide:     1100px;
  --sidebar-width:      240px;
  --nav-height:         60px;
}

/* --- Hero gradient (no image required for text heroes) --- */
.hero-gradient {
  background: linear-gradient(135deg, #042C53 0%, #185FA5 50%, #378ADD 100%);
}

/* --- Applied type styles (use as classes) --- */
.type-hero  { font-family: var(--font-display); font-size: var(--text-hero); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.type-h1    { font-family: var(--font-display); font-size: var(--text-3xl);  font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.type-h2    { font-family: var(--font-display); font-size: var(--text-2xl);  font-weight: var(--weight-medium);   line-height: var(--leading-tight); }
.type-h3    { font-family: var(--font-display); font-size: var(--text-xl);   font-weight: var(--weight-medium);   line-height: var(--leading-snug); }
.type-body  { font-family: var(--font-body);    font-size: var(--text-base); font-weight: var(--weight-regular);  line-height: var(--leading-relaxed); }
.type-ui    { font-family: var(--font-ui);      font-size: var(--text-base); font-weight: var(--weight-regular);  line-height: var(--leading-normal); }
.type-meta  { font-family: var(--font-ui);      font-size: var(--text-sm);   font-weight: var(--weight-regular);  line-height: var(--leading-normal); color: var(--color-text-secondary); }
.type-label { font-family: var(--font-ui);      font-size: var(--text-xs);   font-weight: var(--weight-medium);   line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; }
.type-code  { font-family: var(--font-mono);    font-size: var(--text-sm);   font-weight: var(--weight-regular);  line-height: 1.7; }