/* ==========================================================================
   Design Tokens — Personal Portfolio
   All visual constants defined as CSS custom properties.
   Requirements: 9.1, 9.2, 9.3, 9.4
   ========================================================================== */

/* Import removed — Darleys Sans loaded locally via fonts.css (faster, no duplicate CDN fetch) */

:root {
  /* --------------------------------------------------------------------------
     Hero & Skills Section Colors — Warm Cream/Brown Palette
     -------------------------------------------------------------------------- */
  --ink:         #3d2b1f;   /* chữ chính, tiêu đề */
  --paper:       #FFFFFF;   /* nền toàn section */
  --cream:       #fffdf8;   /* nền card/pill sáng hơn 1 chút so với paper */
  --accent:      #8a5a3c;   /* nâu nhạt - icon, viền nhấn */
  --accent-dark: #5c3a26;   /* nâu đậm - tiêu đề phụ, pill nổi bật */

  /* --------------------------------------------------------------------------
     Color Scale — Beige
     -------------------------------------------------------------------------- */
  --color-beige-50:  #faf7f2;
  --color-beige-100: #f5efe3;
  --color-beige-200: #ede0c8;
  --color-beige-300: #dfc9a8;

  /* --------------------------------------------------------------------------
     Color Scale — Brown
     -------------------------------------------------------------------------- */
  --color-brown-700: #5c3d2e;
  --color-brown-800: #3d2b1f;
  --color-brown-900: #1e1410;

  /* --------------------------------------------------------------------------
     Accent Colors
     -------------------------------------------------------------------------- */
  --color-accent-warm:  #c8956c;   /* warm amber-brown */
  --color-accent-light: #e8c9a0;   /* light beige accent */

  /* --------------------------------------------------------------------------
     Semantic Text Colors
     -------------------------------------------------------------------------- */
  --color-text-primary:   #1e1410;
  --color-text-secondary: #5c3d2e;
  --color-text-on-dark:   #faf7f2;

  /* --------------------------------------------------------------------------
     Border Radius
     Requirements: 9.2
     -------------------------------------------------------------------------- */
  --radius-pill:    999px;   /* buttons, tags — fully rounded */
  --radius-card:    1.5rem;  /* project cards, about card */
  --radius-input:   999px;   /* form inputs */
  --radius-section: 2rem;    /* section containers with distinct background */

  /* --------------------------------------------------------------------------
     Typography — Font Families
     Requirements: 9.3, 9.4
     -------------------------------------------------------------------------- */
  --font-display: 'Lora', serif;
  --font-body:    'Darleys Sans', sans-serif;

  /* --------------------------------------------------------------------------
     Typography — Font Sizes (fluid, using clamp)
     -------------------------------------------------------------------------- */
  --size-hero: clamp(3rem,    7vw,   6rem);
  --size-h2:   clamp(2rem,    4vw,   3rem);
  --size-h3:   clamp(1.4rem,  2.8vw, 2rem);
  --size-body: 1.2rem;
  --size-sm:   1rem;

  /* --------------------------------------------------------------------------
     Typography — Font Weights
     -------------------------------------------------------------------------- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;
  --weight-black:   900;

  /* --------------------------------------------------------------------------
     Spacing Scale
     -------------------------------------------------------------------------- */
  --space-xs:  0.375rem;
  --space-sm:  0.75rem;
  --space-md:  1.25rem;
  --space-lg:  2rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 5.5rem;
  --space-4xl: 8rem;

  /* --------------------------------------------------------------------------
     Transitions
     -------------------------------------------------------------------------- */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   500ms ease;

  /* --------------------------------------------------------------------------
     Shadows
     -------------------------------------------------------------------------- */
  --shadow-sm:   0 1px 3px rgba(61, 43, 31, 0.08);
  --shadow-md:   0 4px 12px rgba(61, 43, 31, 0.12);
  --shadow-lg:   0 8px 24px rgba(61, 43, 31, 0.16);
  --shadow-card: 0 4px 16px rgba(61, 43, 31, 0.10);
  --shadow-card-hover: 0 12px 32px rgba(61, 43, 31, 0.22);
}