/* ============================================================
   Design Tokens — synced FROM Figma Variables
   Source of truth: Figma "Portfolio Design System"
   https://www.figma.com/design/iwvU1sABb2F5LqP7tNPe1l
   Do not hand-edit values here without updating Figma first.
   Sync: ask Claude Code to "sync tokens from Figma".
   Last synced: 2026-07-15 (gray/200 → #EBEBEB)
   ============================================================ */

:root {
  /* ---- Primitives (color/...) ---- */
  --blue-300: #86C8FC;
  --blue-500: #007CBC;
  --blue-600: #00689D;
  --blue-700: #005FCC;
  --gray-50:  #F8F8F7;
  --gray-75:  #F2F2F2;
  --gray-100: #ECEDF0;
  --gray-200: #EBEBEB;
  --gray-300: #C8C9CB;
  --gray-600: #646261;
  --gray-800: #2D2B2A;
  --gray-850: #333333;
  --gray-900: #0C0F18;
  --red-600:  #AD3300;
  --white:    #FFFFFF;
  --black:    #000000;

  /* ---- Semantic: text ---- */
  --color-text-primary:   var(--gray-900);
  --color-text-secondary: var(--gray-600);
  --color-text-link:      var(--gray-800);
  --color-text-accent:    var(--blue-600);
  --color-text-brand:     var(--blue-500);
  --color-text-inverse:   var(--white);
  --color-text-error:     var(--red-600);

  /* ---- Semantic: background ---- */
  --color-bg-default:       var(--white);
  --color-bg-subtle:        var(--gray-50);
  --color-bg-muted:         var(--gray-100);
  --color-bg-icon:          var(--gray-75);
  --color-bg-brand:         var(--blue-500);
  --color-bg-brand-hover:   var(--blue-300);
  --color-bg-neutral-hover: var(--gray-200);

  /* ---- Semantic: border & focus ---- */
  --color-border-default:  var(--gray-100);
  --color-border-strong:   var(--gray-850);
  --color-border-emphasis: var(--black);
  --color-focus-ring:      var(--blue-700);

  /* ---- Spacing (space/N = N * 4px) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-16: 64px;
  --space-20: 80px;
  --space-25: 100px;

  /* ---- Radius ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 90px;

  /* ---- Typography ---- */
  --font-heading: "Albert Sans", sans-serif;
  --font-body:    "Roboto", sans-serif;

  /* ---- Effects ---- */
  --shadow-card: 0px 4px 12px rgba(0, 0, 0, 0.15);
}