/* ============================================================
   Aartisan Design System — Foundations
   Colors + Type tokens (raw values + semantic aliases)
   ============================================================ */

/* ----- Fonts ----- */
@font-face {
  font-family: "GT Proelium";
  src: url("./fonts/GTProelium.otf") format("opentype");
  font-weight: 400 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "GT Proelium";
  src: url("./fonts/GTProeliumItalic.otf") format("opentype");
  font-weight: 400 900;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "GT Proelium Sharp";
  src: url("./fonts/GTProeliumSharp.otf") format("opentype");
  font-weight: 400 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "GT Proelium Sharp";
  src: url("./fonts/GTProeliumSharpItalic.otf") format("opentype");
  font-weight: 400 900;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("./fonts/NunitoSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("./fonts/NunitoSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("./fonts/NunitoSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("./fonts/NunitoSans-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: block;
}

:root {
  /* ============================================================
     BRAND COLORS — raw palette
     Sampled directly from the official logo.
     ============================================================ */

  /* ============================================================
     OFFICIAL PALETTE — from the Aartisan brandbook.
     Five named colors. Use these names in source comments and
     designer conversation; the numbered scales below are derived
     for UI use only (states, hovers, soft fills).
     ============================================================ */
  --color-crimson-violet: #700353;   /* PRIMARY — the wordmark */
  --color-indigo-ink:     #320D6D;   /* SECONDARY — the triangle */
  --color-dark-walnut:    #4C1C00;   /* SUPPORTING — warm dark brown */
  --color-powder-blush:   #FFBFB7;   /* ACCENT — the pink card */
  --color-mustard:        #FFD447;   /* ACCENT — the yellow diamond */

  /* Crimson Violet scale — UI-only derivations */
  --color-plum-900: #3B0029;
  --color-plum-800: #54023D;
  --color-plum-700: #700353;   /* = crimson-violet */
  --color-plum-600: #871D6A;
  --color-plum-500: #A03B83;
  --color-plum-400: #BC6FA5;
  --color-plum-300: #D7A1C6;
  --color-plum-200: #ECCFE0;
  --color-plum-100: #F8EAF1;
  --color-plum-50:  #FCF6FA;

  /* Indigo Ink scale — UI-only derivations */
  --color-indigo-900: #170432;
  --color-indigo-800: #22094E;
  --color-indigo-700: #320D6D;   /* = indigo-ink */
  --color-indigo-600: #4B1F8D;
  --color-indigo-500: #6638AB;
  --color-indigo-400: #8E69C7;
  --color-indigo-300: #B5A0DA;
  --color-indigo-200: #DAD0EE;

  /* Dark Walnut scale — UI-only derivations (NEW: official brand color) */
  --color-walnut-900: #260E00;
  --color-walnut-800: #381500;
  --color-walnut-700: #4C1C00;   /* = dark-walnut */
  --color-walnut-600: #6B2C0C;
  --color-walnut-500: #8A4322;
  --color-walnut-400: #AC6E4F;
  --color-walnut-300: #C99B82;
  --color-walnut-200: #E2C8B8;

  /* Powder Blush scale */
  --color-blush-700: #E89589;
  --color-blush-600: #F2A89C;
  --color-blush-500: #FFBFB7;    /* = powder-blush */
  --color-blush-400: #FFCFC8;
  --color-blush-300: #FFDFDA;
  --color-blush-200: #FFEDE9;
  --color-blush-100: #FFF6F4;

  /* Mustard scale */
  --color-sunshine-700: #C0961F;
  --color-sunshine-600: #DDB12D;
  --color-sunshine-500: #FFD447;   /* = mustard */
  --color-sunshine-400: #FFE076;
  --color-sunshine-300: #FFEBA1;
  --color-sunshine-200: #FFF4CC;
  --color-sunshine-100: #FFFAE6;

  /* Neutrals — paper-warm, not gray. Matches blush/plum world. */
  --color-paper:     #FAF6F0;   /* page background */
  --color-paper-2:   #F2EBE0;   /* subtle card background */
  --color-cream:     #FFFBF3;   /* highest paper tone */
  --color-ink-900:   #1A0F1A;   /* primary text */
  --color-ink-700:   #3A2E3A;   /* body text */
  --color-ink-500:   #6B5C6B;   /* muted text */
  --color-ink-300:   #B5ABB0;   /* placeholder, disabled */
  --color-ink-200:   #DDD4D0;   /* divider */
  --color-ink-100:   #ECE5DE;   /* hairline */
  --color-white:     #FFFFFF;
  --color-black:     #000000;

  /* Semantic — borrowed from the palette, not invented */
  --color-success:   #4A7C59;   /* mossy green that plays nice w/ crimson */
  --color-success-bg:#E4EFE6;
  --color-warning:   #DDB12D;   /* mustard-600 */
  --color-warning-bg:#FFFAE6;
  --color-danger:    #B23E5C;   /* crimson-leaning red */
  --color-danger-bg: #FBE6EB;
  --color-info:      #4B1F8D;   /* indigo-600 */
  --color-info-bg:   #ECE6F7;

  /* ============================================================
     SEMANTIC COLOR TOKENS — use these in components
     ============================================================ */
  --bg:              var(--color-paper);
  --bg-elevated:     var(--color-cream);
  --bg-sunken:       var(--color-paper-2);
  --bg-inverse:      var(--color-plum-700);
  --bg-brand:        var(--color-plum-700);
  --bg-brand-soft:   var(--color-blush-200);
  --bg-accent:       var(--color-sunshine-500);

  --fg:              var(--color-ink-900);
  --fg-1:            var(--color-ink-900);  /* primary text */
  --fg-2:            var(--color-ink-700);  /* body */
  --fg-3:            var(--color-ink-500);  /* muted */
  --fg-4:            var(--color-ink-300);  /* placeholder */
  --fg-on-brand:     var(--color-cream);
  --fg-on-accent:    var(--color-plum-900);
  --fg-link:         var(--color-plum-700);
  --fg-link-hover:   var(--color-plum-900);

  --border:          var(--color-ink-200);
  --border-strong:   var(--color-plum-700);
  --border-subtle:   var(--color-ink-100);

  /* ============================================================
     TYPOGRAPHY — raw families
     ============================================================ */
  --font-display: "GT Proelium", "GT Proelium Sharp", sans-serif;
  --font-display-sharp: "GT Proelium Sharp", "GT Proelium", sans-serif;
  --font-body:    "Nunito Sans", sans-serif;
  --font-mono:    ui-monospace, monospace;

  /* Type scale (rem assumes 16px base). Display is BIG and chunky. */
  --fs-hero:    clamp(3.5rem, 8vw, 7.5rem);  /* 56 → 120 */
  --fs-display: clamp(2.75rem, 5.5vw, 5rem); /* 44 → 80  */
  --fs-h1:      clamp(2rem, 3.5vw, 3rem);    /* 32 → 48  */
  --fs-h2:      clamp(1.5rem, 2.6vw, 2.25rem); /* 24 → 36 */
  --fs-h3:      1.5rem;    /* 24 */
  --fs-h4:      1.25rem;   /* 20 */
  --fs-lead:    1.25rem;   /* 20 */
  --fs-body:    1rem;      /* 16 */
  --fs-small:   0.875rem;  /* 14 */
  --fs-micro:   0.75rem;   /* 12 */

  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.5;
  --lh-loose:   1.65;

  --ls-tight:  -0.02em;
  --ls-normal:  0em;
  --ls-wide:    0.04em;
  --ls-eyebrow: 0.14em;

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ============================================================
     RADII — modest. Aartisan is more "framed rectangle" than "blob".
     ============================================================ */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS — soft and warm, never neutral gray.
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(50, 13, 109, 0.06);
  --shadow-sm: 0 2px 6px rgba(50, 13, 109, 0.08);
  --shadow-md: 0 8px 20px rgba(50, 13, 109, 0.10);
  --shadow-lg: 0 18px 40px rgba(50, 13, 109, 0.14);
  --shadow-xl: 0 30px 60px rgba(50, 13, 109, 0.18);
  /* Signature "framed" shadow — offset solid block, references logo border.
     NOTE: brandbook prohibits shadows on the LOGO itself. UI surfaces are fine. */
  --shadow-frame: 6px 6px 0 0 var(--color-indigo-ink);
  --shadow-frame-lg: 10px 10px 0 0 var(--color-indigo-ink);

  /* ============================================================
     BORDERS — the brand uses 2-3px borders very intentionally
     ============================================================ */
  --border-w-1: 1px;
  --border-w-2: 2px;
  --border-w-3: 3px;
  --border-w-4: 4px;

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES — apply these as classes
   ============================================================ */

.t-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-micro);
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-plum-700);
}

.t-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

.t-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.t-small {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.t-micro {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-micro);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-wide);
  color: var(--fg-3);
}

.t-quote {
  font-family: var(--font-display-sharp);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* Base reset that opts in to this system */
.aartisan-root {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}