/* ============================================================
   PERSONAL DESIGN SYSTEM — colors_and_type.css
   ============================================================ */

/* ----------------------------------------------------------
   FONT FACE DECLARATIONS
   ---------------------------------------------------------- */
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Thin.ttf'); font-weight: 100; font-style: normal; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ThinItalic.ttf'); font-weight: 100; font-style: italic; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ExtraLight.ttf'); font-weight: 200; font-style: normal; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ExtraLightItalic.ttf'); font-weight: 200; font-style: italic; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Light.ttf'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-LightItalic.ttf'); font-weight: 300; font-style: italic; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Regular.ttf'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Italic.ttf'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Medium.ttf'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-MediumItalic.ttf'); font-weight: 500; font-style: italic; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-SemiBold.ttf'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-SemiBoldItalic.ttf'); font-weight: 600; font-style: italic; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Bold.ttf'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-BoldItalic.ttf'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ExtraBold.ttf'); font-weight: 800; font-style: normal; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ExtraBoldItalic.ttf'); font-weight: 800; font-style: italic; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Black.ttf'); font-weight: 900; font-style: normal; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-BlackItalic.ttf'); font-weight: 900; font-style: italic; }

/* ----------------------------------------------------------
   COLOR PRIMITIVES
   ---------------------------------------------------------- */
:root {
  /* Neutral Scale */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F8F7F4;
  --color-neutral-100: #F0EDE8;
  --color-neutral-200: #E2DDD5;
  --color-neutral-300: #C9C3B8;
  --color-neutral-400: #A89F93;
  --color-neutral-500: #7E7469;
  --color-neutral-600: #5C5249;
  --color-neutral-700: #3D3630;
  --color-neutral-800: #241F1A;
  --color-neutral-900: #0F0D0B;

  /* Ink (Primary Brand Dark) */
  --color-ink-900:    #0D1117;
  --color-ink-800:    #161C26;
  --color-ink-700:    #1E2635;
  --color-ink-600:    #28334A;
  --color-ink-500:    #334060;
  --color-ink-400:    #4F6080;
  --color-ink-300:    #7388A6;
  --color-ink-200:    #A2B4CB;
  --color-ink-100:    #D1DCE8;
  --color-ink-50:     #EBF0F6;

  /* Amber (Accent) */
  --color-amber-900:  #3D1F00;
  --color-amber-800:  #6B3800;
  --color-amber-700:  #9A5400;
  --color-amber-600:  #C97200;
  --color-amber-500:  #E8890A;
  --color-amber-400:  #F5A633;
  --color-amber-300:  #F8BF6A;
  --color-amber-200:  #FAD59E;
  --color-amber-100:  #FDECD1;
  --color-amber-50:   #FEF7ED;

  /* Sage (Secondary Accent) */
  --color-sage-900:   #0F2317;
  --color-sage-800:   #1A3D28;
  --color-sage-700:   #265939;
  --color-sage-600:   #34784D;
  --color-sage-500:   #439962;
  --color-sage-400:   #65B47F;
  --color-sage-300:   #92CCA4;
  --color-sage-200:   #BFE0CA;
  --color-sage-100:   #DEEEE4;
  --color-sage-50:    #EEF7F1;

  /* Semantic Status */
  --color-error:      #D94040;
  --color-warning:    #E8890A;
  --color-success:    #439962;
  --color-info:       #4F6080;

  /* ----------------------------------------------------------
     SEMANTIC COLOR TOKENS
     ---------------------------------------------------------- */

  /* Backgrounds */
  --bg-page:          var(--color-neutral-50);
  --bg-surface:       var(--color-neutral-0);
  --bg-raised:        var(--color-neutral-0);
  --bg-subtle:        var(--color-neutral-100);
  --bg-inverse:       var(--color-ink-900);
  --bg-accent:        var(--color-amber-500);

  /* Foregrounds */
  --fg-primary:       var(--color-ink-900);
  --fg-secondary:     var(--color-neutral-600);
  --fg-tertiary:      var(--color-neutral-400);
  --fg-inverse:       var(--color-neutral-0);
  --fg-accent:        var(--color-amber-600);
  --fg-link:          var(--color-ink-500);
  --fg-link-hover:    var(--color-amber-600);

  /* Borders */
  --border-subtle:    var(--color-neutral-200);
  --border-default:   var(--color-neutral-300);
  --border-strong:    var(--color-neutral-500);
  --border-accent:    var(--color-amber-400);

  /* ----------------------------------------------------------
     TYPOGRAPHY PRIMITIVES
     ---------------------------------------------------------- */

  --font-sans:        'Poppins', system-ui, sans-serif;
  --font-display:     'Poppins', system-ui, sans-serif;
  --font-mono:        'Courier New', monospace;

  /* Size scale */
  --text-xs:          0.75rem;    /* 12px */
  --text-sm:          0.875rem;   /* 14px */
  --text-base:        1rem;       /* 16px */
  --text-lg:          1.125rem;   /* 18px */
  --text-xl:          1.25rem;    /* 20px */
  --text-2xl:         1.5rem;     /* 24px */
  --text-3xl:         1.875rem;   /* 30px */
  --text-4xl:         2.25rem;    /* 36px */
  --text-5xl:         3rem;       /* 48px */
  --text-6xl:         3.75rem;    /* 60px */
  --text-7xl:         4.5rem;     /* 72px */

  /* Weight tokens */
  --weight-thin:      100;
  --weight-extralight: 200;
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* Line height */
  --leading-tight:    1.15;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;
  --leading-loose:    1.8;

  /* Letter spacing */
  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.16em;

  /* ----------------------------------------------------------
     SPACING SCALE
     ---------------------------------------------------------- */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ----------------------------------------------------------
     BORDER RADIUS
     ---------------------------------------------------------- */
  --radius-none:   0;
  --radius-sm:     2px;
  --radius-base:   4px;
  --radius-md:     6px;
  --radius-lg:     10px;
  --radius-xl:     16px;
  --radius-2xl:    24px;
  --radius-full:   9999px;

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */
  --shadow-xs:     0 1px 2px 0 oklch(0% 0 0 / 0.06);
  --shadow-sm:     0 1px 4px 0 oklch(0% 0 0 / 0.08), 0 1px 2px -1px oklch(0% 0 0 / 0.06);
  --shadow-base:   0 4px 12px 0 oklch(0% 0 0 / 0.10), 0 2px 4px -2px oklch(0% 0 0 / 0.07);
  --shadow-md:     0 8px 24px 0 oklch(0% 0 0 / 0.12), 0 4px 8px -4px oklch(0% 0 0 / 0.08);
  --shadow-lg:     0 16px 40px 0 oklch(0% 0 0 / 0.14), 0 8px 16px -8px oklch(0% 0 0 / 0.10);
  --shadow-xl:     0 24px 64px 0 oklch(0% 0 0 / 0.18);
  --shadow-inner:  inset 0 2px 4px 0 oklch(0% 0 0 / 0.08);

  /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   350ms;
}

/* ----------------------------------------------------------
   SEMANTIC TYPE STYLES
   ---------------------------------------------------------- */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-primary);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--fg-primary);
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

.body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

.label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-tertiary);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-subtle);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  color: var(--fg-primary);
}

/* ----------------------------------------------------------
   BASE RESET
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}
a:hover { color: var(--fg-link-hover); }