/* css/tokens.css — MăBucur Studio Design Token System */
/* Two-layer approach: primitive values → semantic aliases */

:root {
  /* ============================================================
     PRIMITIVE COLOR TOKENS
     ============================================================ */
  --color-white:       #FFFFFF;
  --color-off-white:   #F8F8F8;
  --color-mint:        #F0FDFA;
  --color-teal:        #0D9488;
  --color-teal-dark:   #0A7A6F;
  --color-near-black:  #1A1A1A;
  --color-black-deep:  #111111;
  --color-text-light:  #E5E5E5;

  /* ============================================================
     SEMANTIC TOKENS (role-based aliases)
     ============================================================ */
  --bg-primary:         var(--color-white);
  --bg-alt:             var(--color-off-white);
  --bg-accent:          var(--color-mint);
  --bg-footer:          var(--color-near-black);
  --bg-copyright:       var(--color-black-deep);
  --color-accent:       var(--color-teal);
  --color-accent-hover: var(--color-teal-dark);
  --color-text:         var(--color-near-black);
  --color-text-on-dark: var(--color-text-light);

  /* ============================================================
     SPACING SCALE (4px base)
     ============================================================ */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-24: 6rem;      /* 96px */

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  /* Font family */
  --font-family: 'Plus Jakarta Sans', sans-serif;

  /* Type scale */
  --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 */
  --font-size-5xl:  3rem;      /* 48px */
  --font-size-6xl:  3.75rem;   /* 60px */

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

  /* Line heights */
  --line-height-tight:  1.2;
  --line-height-snug:   1.4;
  --line-height-normal: 1.6;

  /* Letter spacing */
  --letter-spacing-heading: 0.05em;  /* H1 uppercase */
  --letter-spacing-normal:  0;

  /* ============================================================
     TRANSITIONS
     ============================================================ */
  --transition-fast:  150ms ease;
  --transition-base:  250ms ease;
  --transition-slow:  400ms ease;

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-header: 0 2px 12px rgba(0, 0, 0, 0.10);

  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-full: 9999px;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-max:     1200px;
  --container-padding: var(--space-6);
}