/* Fadma — Base: reset + token system */

:root {
  /* COLOR TOKENS — light mode defaults */
  --t-primary:        #7c3aed;
  --t-primary-hover:  #6d28d9;
  --t-primary-light:  #ede9fe;
  --t-secondary:      #3b1f6e;
  --t-accent:         #e8d5b0;
  --t-surface:        #faf9f7;
  --t-surface-alt:    #f3f0ec;
  --t-surface-raised: #ffffff;
  --t-text:           #1a1118;
  --t-text-secondary: #4a3f52;
  --t-text-muted:     #8b7d97;
  --t-border:         rgba(124,58,237,0.12);
  --t-border-hover:   rgba(124,58,237,0.32);
  --t-success:        #16a34a;
  --t-warning:        #d97706;
  --t-danger:         #dc2626;
  --t-shadow:         rgba(59,31,110,0.10);
  --t-shadow-hover:   rgba(59,31,110,0.22);
  --t-overlay:        rgba(26,17,24,0.55);

  /* TYPOGRAPHY TOKENS */
  --t-font-display: 'Cormorant Garamond', Georgia, serif;
  --t-font-body:    'Inter', system-ui, sans-serif;
  --t-font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-text-xs:   clamp(0.70rem, 0.65rem + 0.25vw, 0.75rem);
  --t-text-sm:   clamp(0.82rem, 0.78rem + 0.22vw, 0.875rem);
  --t-text-base: clamp(0.9375rem, 0.90rem + 0.20vw, 1rem);
  --t-text-md:   clamp(1.05rem, 1.00rem + 0.28vw, 1.125rem);
  --t-text-lg:   clamp(1.15rem, 1.05rem + 0.50vw, 1.25rem);
  --t-text-xl:   clamp(1.30rem, 1.10rem + 1.00vw, 1.5rem);
  --t-text-2xl:  clamp(1.60rem, 1.20rem + 2.00vw, 2.25rem);
  --t-text-3xl:  clamp(2.00rem, 1.40rem + 3.00vw, 3.25rem);
  --t-text-4xl:  clamp(2.60rem, 1.60rem + 5.00vw, 4.75rem);
  --t-text-5xl:  clamp(3.20rem, 1.80rem + 7.00vw, 6.50rem);

  --t-weight-regular: 400;
  --t-weight-medium:  500;
  --t-weight-semibold:600;
  --t-weight-bold:    700;

  --t-leading-tight:  1.15;
  --t-leading-snug:   1.35;
  --t-leading-normal: 1.60;
  --t-leading-loose:  1.80;

  --t-tracking-tight:  -0.03em;
  --t-tracking-normal:  0em;
  --t-tracking-wide:    0.06em;
  --t-tracking-wider:   0.12em;

  /* SPACING RAMP */
  --t-space-1:  0.25rem;
  --t-space-2:  0.5rem;
  --t-space-3:  0.75rem;
  --t-space-4:  1rem;
  --t-space-5:  1.25rem;
  --t-space-6:  1.5rem;
  --t-space-7:  2rem;
  --t-space-8:  2.5rem;
  --t-space-9:  3.5rem;
  --t-space-10: 5rem;
  --t-space-11: 7rem;
  --t-space-12: 10rem;

  /* RADIUS */
  --t-radius-xs: 1px;
  --t-radius-sm: 2px;
  --t-radius-md: 4px;
  --t-radius-lg: 8px;
  --t-radius-pill: 999px;

  /* SHADOW */
  --t-shadow-xs:  0 1px 3px var(--t-shadow);
  --t-shadow-sm:  0 2px 8px var(--t-shadow);
  --t-shadow-md:  0 6px 24px var(--t-shadow);
  --t-shadow-lg:  0 16px 48px var(--t-shadow);

  /* MOTION */
  --t-dur-fast:   150ms;
  --t-dur-base:   260ms;
  --t-dur-slow:   420ms;
  --t-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --t-ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --t-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

[data-theme="dark"] {
  --t-primary:        #a78bfa;
  --t-primary-hover:  #c4b5fd;
  --t-primary-light:  #2d1f4e;
  --t-secondary:      #c4b5fd;
  --t-accent:         #c9a96e;
  --t-surface:        #120d1a;
  --t-surface-alt:    #1c1427;
  --t-surface-raised: #241b34;
  --t-text:           #f0ebf8;
  --t-text-secondary: #c4b5d4;
  --t-text-muted:     #7c6d8a;
  --t-border:         rgba(167,139,250,0.14);
  --t-border-hover:   rgba(167,139,250,0.35);
  --t-success:        #4ade80;
  --t-warning:        #fbbf24;
  --t-danger:         #f87171;
  --t-shadow:         rgba(0,0,0,0.40);
  --t-shadow-hover:   rgba(0,0,0,0.60);
  --t-overlay:        rgba(0,0,0,0.70);
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--t-font-body);
  font-size: var(--t-text-base);
  line-height: var(--t-leading-normal);
  color: var(--t-text);
  background-color: var(--t-surface);
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; }
h1,h2,h3,h4,h5,h6 {
  font-family: var(--t-font-display);
  font-weight: var(--t-weight-semibold);
  line-height: var(--t-leading-tight);
  letter-spacing: var(--t-tracking-tight);
  color: var(--t-text);
}

/* CONTAINER */
.container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--t-space-5);
}
@media (min-width: 768px)  { .container { padding-inline: var(--t-space-8); } }
@media (min-width: 1280px) { .container { padding-inline: var(--t-space-9); } }

/* PROSE */
.prose {
  max-width: 740px;
  font-size: var(--t-text-md);
  line-height: var(--t-leading-loose);
  color: var(--t-text-secondary);
}
.prose h2,.prose h3,.prose h4 { color: var(--t-text); margin-block: var(--t-space-8) var(--t-space-3); }
.prose h2 { font-size: var(--t-text-2xl); }
.prose h3 { font-size: var(--t-text-xl); }
.prose p,.prose ul,.prose ol { margin-block-end: var(--t-space-5); }
.prose ul,.prose ol { padding-inline-start: var(--t-space-6); list-style: revert; }
.prose a { color: var(--t-primary); border-bottom: 1px solid var(--t-border-hover); transition: color var(--t-dur-fast) var(--t-ease-out); }
.prose a:hover { color: var(--t-primary-hover); }
.prose blockquote { border-inline-start: 3px solid var(--t-primary); padding-inline-start: var(--t-space-6); color: var(--t-text-muted); font-style: italic; margin-block: var(--t-space-7); }
.prose code { font-family: var(--t-font-mono); font-size: 0.875em; background: var(--t-primary-light); color: var(--t-primary); padding: 0.1em 0.4em; border-radius: var(--t-radius-sm); }
.prose pre { background: var(--t-surface-alt); border: 1px solid var(--t-border); border-radius: var(--t-radius-md); padding: var(--t-space-6); overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose img { border-radius: var(--t-radius-md); margin-block: var(--t-space-7); }
.prose hr { border: none; border-top: 1px solid var(--t-border); margin-block: var(--t-space-9); }

/* UTILITIES */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-block-start: var(--t-space-2); inset-inline-start: var(--t-space-2); z-index: 9999; background: var(--t-primary); color: #fff; padding: var(--t-space-2) var(--t-space-4); border-radius: var(--t-radius-sm); font-size: var(--t-text-sm); font-weight: var(--t-weight-semibold); transform: translateY(-200%); transition: transform var(--t-dur-fast) var(--t-ease-out); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--t-primary); outline-offset: 3px; border-radius: var(--t-radius-xs); }