/* ArqNova — Design tokens (colors, typography, spacing, effects, fonts) */

@font-face { font-family: "Lato"; src: url("../fonts/Lato-Hairline.ttf") format("truetype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-Thin.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-Semibold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;

  /* ---- Rose gold spectrum (core brand) ---- */
  --rosegold-50:  #FBF1EB;
  --rosegold-100: #F5E2D8;
  --rosegold-200: #EBCEBF;
  --rosegold-300: #DEB5A2;
  --rosegold-400: #CE9C85;
  --rosegold-500: #BE8770;
  --rosegold-600: #A9735D;
  --rosegold-700: #8C5E4B;
  --rosegold-800: #6E4A3C;
  --rosegold-900: #4E352B;

  /* ---- Warm neutral / ink ---- */
  --ink-900: #1C1917;
  --ink-800: #302A26;
  --ink-700: #47403A;
  --ink-600: #635A52;
  --ink-500: #837970;
  --ink-400: #A79C92;
  --ink-300: #C9BFB5;
  --ink-200: #E4DBD2;
  --ink-100: #F1EAE3;
  --paper:   #FAF5F0;
  --white:   #FFFFFF;

  /* ---- Sub-brand accents (KIDS Interiors) ---- */
  --sage:       #8A9A6B;
  --sage-soft:  #B7C1A0;
  --gold:       #C69A5C;
  --gold-soft:  #E1C9A2;
  --terracotta: #B07060;

  /* ---- Metallic foil gradient ---- */
  --gradient-rosegold: linear-gradient(115deg, #F5E2D8 0%, #C98F76 18%, #EFD4C7 34%, #A9735D 52%, #F2DACE 68%, #8C5E4B 86%, #E9C9B8 100%);
  --gradient-rosegold-soft: linear-gradient(120deg, #F5E2D8 0%, #DEB5A2 50%, #C98F76 100%);

  /* ---- Semantic aliases ---- */
  --text-primary:    var(--ink-900);
  --text-secondary:  var(--ink-600);
  --text-muted:      var(--ink-400);
  --text-accent:     var(--rosegold-600);
  --text-on-dark:    var(--paper);
  --text-on-accent:  var(--white);

  --surface-page:    var(--paper);
  --surface-card:    var(--white);
  --surface-inset:   var(--ink-100);
  --surface-dark:    var(--ink-900);
  --surface-accent:  var(--rosegold-500);
  --surface-accent-soft: var(--rosegold-50);

  --border-subtle:   var(--ink-200);
  --border-default:  var(--ink-300);
  --border-strong:   var(--ink-900);
  --border-accent:   var(--rosegold-400);

  --accent:          var(--rosegold-500);
  --accent-hover:    var(--rosegold-600);
  --accent-press:    var(--rosegold-700);

  --success: #6E8B5A;
  --warning: #C69A5C;
  --danger:  #B0554A;

  /* ---- Typography ---- */
  --font-body:    "Lato", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fw-hairline: 100;
  --fw-thin:     200;
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  --text-2xs:  0.6875rem;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-4xl:  4rem;
  --text-5xl:  5.5rem;

  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tightest: -0.02em;
  --tracking-tight:    -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.08em;
  --tracking-wider:    0.18em;
  --tracking-widest:   0.32em;

  /* ---- Spacing & radius — 4px base rhythm ---- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   16px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --container-sm:  640px;
  --container-md:  960px;
  --container-lg:  1200px;
  --container-xl:  1440px;
  --gutter:        var(--space-5);
  --section-pad:   var(--space-9);

  --border-hairline: 1px;
  --border-thin:     1.5px;
  --border-thick:    2px;

  /* ---- Effects: shadows, motion, overlays ---- */
  --shadow-xs: 0 1px 2px rgba(46, 30, 24, 0.06);
  --shadow-sm: 0 2px 8px rgba(46, 30, 24, 0.07);
  --shadow-md: 0 8px 24px rgba(46, 30, 24, 0.09);
  --shadow-lg: 0 18px 48px rgba(46, 30, 24, 0.12);
  --shadow-xl: 0 32px 80px rgba(46, 30, 24, 0.16);
  --shadow-accent: 0 12px 40px rgba(169, 115, 93, 0.28);
  --ring-accent: 0 0 0 3px rgba(190, 135, 112, 0.30);

  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0.0, 1, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
  --dur-slower: 720ms;

  --blur-panel: blur(16px) saturate(1.1);
  --overlay-dark: rgba(28, 25, 23, 0.55);
  --overlay-scrim: linear-gradient(to top, rgba(28, 25, 23, 0.78) 0%, rgba(28, 25, 23, 0) 62%);
  --hairline-rule: 1px solid var(--border-subtle);
}