/* ============================================================
 * Uni.Link — Web Design System Tokens
 * Canonical palette (usage distribution):
 *   60% white / light surfaces  (#FFFFFF / #F8FAFC)  -> backgrounds, cards, nav
 *   30% Deep Teal (#0D7377)                           -> primary actions, links, accents
 *   10% Amber Glow (#F59E0B)                           -> CTA buttons, badges, hover
 * Semantic colors follow WCAG 2.1 AA:
 *   primary teal (#0D7377) on white = 4.87:1 (AA large)
 *   navy text  (#1B2A4A) on white  = 12.63:1 (AAA)
 *   white      on teal            = 4.52:1 (AA normal)
 * Icon state rules:
 *   Active  -> Deep Teal (#0D7377)
 *   Passive -> Warm Navy (#1B2A4A) @ 60% opacity
 *   Hover   -> Amber       (#F59E0B)
 *   Error   -> Red         (#EF4444)
 *   Success -> Green        (#10B981)
 * ============================================================ */
:root {
  /* Brand / action */
  --color-primary:   #0D7377;   /* Deep Teal — 30% */
  --color-primary-800: #063335;  /* Deep Teal (darken) */
  --color-accent:    #F59E0B;   /* Amber Glow — 10% */
  --color-success:   #10B981;   /* Emerald — semantic success */
  --color-error:     #EF4444;   /* Red — semantic error */
  --color-info:      #3B82F6;   /* Blue — semantic info (links) */

  /* Surface (60% white / light) */
  --color-bg:        #FFFFFF;   /* main background */
  --color-surface:   #F8FAFC;   /* cards / elevated surfaces */
  --color-surface-2: #F5F5F5;   /* secondary surfaces / inputs */
  --color-border:    #E8E8E8;   /* dividers / borders */
  --color-border-2:  #E0E0E0;

  /* Text */
  --color-text:      #1B2A4A;   /* Warm Navy — primary text */
  --color-text-2:    #404040;   /* secondary text */
  --color-text-3:    #64748B;   /* muted text */
  --color-text-inverse:#FFFFFF; /* text on teal/brand */

  /* Functional aliases */
  --brand-primary:   var(--color-primary);
  --brand-secondary: var(--color-text);
  --brand-accent:    var(--color-accent);
  --bg-primary:      var(--color-bg);
  --bg-secondary:    var(--color-surface);
  --text-primary:    var(--color-text);
  --text-secondary:  var(--color-text-2);

  /* Typography / layout */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs:  0.75rem;  /* 12px */
  --font-size-sm:  0.875rem; /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg:  1.125rem; /* 18px */
  --font-size-xl:  1.25rem;  /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem;  /* 36px */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.10);
}

/* Base + utility helpers consumed by the static pages. */
[data-lang] .lang-btn {
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: var(--color-surface-2);
  color: var(--color-text-2);
  border: 1px solid var(--color-border);
}
[data-lang] .lang-btn:hover { background: var(--color-primary); color: var(--color-text-inverse); }

.btn-primary  { background: var(--color-primary); color: var(--color-text-inverse); }
.btn-primary:hover { background: var(--color-accent); }
.btn-cta      { background: var(--color-accent); color: var(--color-text); }
.btn-cta:hover{ background: #e68a06; }
.text-brand   { color: var(--color-primary); }
.bg-brand     { background: var(--color-primary); }