/*
  KAIROS ATELIER — Sovereign Luxury Design Tokens
  Philosophy: Architectural distinction, quiet confidence, and tactile depth.
  Grounded in deep obsidian stone, raw alabaster paper, and the golden solar
  signal of Kairos — the decisive moment of transformation.
*/

:root {
  /* ---------------- Color: Light mode (Raw Alabaster) ---------------- */
  --color-bg-primary:        #F6F3EC;
  --color-bg-secondary:      #EFEBE1;
  --color-bg-tertiary:       #E4DED1;
  --color-bg-inverse:        #0C0B09;

  --color-text-primary:      #141310;
  --color-text-secondary:    #47433B;
  --color-text-tertiary:     #827C70;
  --color-text-inverse:      #F6F3EC;
  --color-text-inverse-muted: rgba(246, 243, 236, 0.65);
  --color-text-link:         #C2871A;

  --color-border-primary:    #D8D1BF;
  --color-border-secondary:  #E6DFD0;
  --color-border-focus:      #D49B2A;
  --color-border-inverse:    rgba(246, 243, 236, 0.12);

  --color-accent-primary:        #D49B2A; /* Solar Liquid Gold */
  --color-accent-primary-hover:  #BF881E;
  --color-accent-primary-active: #A87514;
  --color-accent-secondary:      #D44430; /* Ember Coral */
  --color-accent-secondary-hover:#B83623;

  --color-status-success: #2F9E5B;
  --color-status-warning: #D49B2A;
  --color-status-error:   #D44430;
  --color-status-info:    #2E7CD6;

  --color-surface-overlay: rgba(12, 11, 9, 0.65);

  /* Fixed light-on-dark tokens for media cards */
  --color-text-onphoto:        #F6F3EC;
  --color-text-onphoto-muted:  rgba(246, 243, 236, 0.75);
  --color-border-onphoto:      rgba(246, 243, 236, 0.20);
  --color-glass-onphoto:       rgba(12, 11, 9, 0.72);

  --shadow-sm: 0 2px 4px rgba(12, 11, 9, 0.04);
  --shadow-md: 0 8px 24px rgba(12, 11, 9, 0.08);
  --shadow-lg: 0 24px 60px rgba(12, 11, 9, 0.14);
  --shadow-focus: 0 0 0 3px rgba(212, 155, 42, 0.35);
  --shadow-glow: 0 0 40px rgba(212, 155, 42, 0.30);

  /* ---------------- Spacing (8px architectural scale) ---------------- */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  12px;
  --space-6:  16px;
  --space-7:  24px;
  --space-8:  32px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 96px;
  --space-12: 128px;
  --space-13: 160px;

  /* ---------------- Typography ---------------- */
  --font-family-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-body:    'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-family-mono:    'JetBrains Mono', 'Consolas', monospace;

  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md:   1.125rem;  /* 18px */
  --font-size-lg:   1.375rem;  /* 22px */
  --font-size-xl:   1.75rem;   /* 28px */
  --font-size-2xl:  2.5rem;    /* 40px */
  --font-size-3xl:  3.5rem;    /* 56px */
  --font-size-4xl:  5.25rem;   /* 84px, monumental hero */

  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.08;
  --line-height-snug:    1.25;
  --line-height-normal:  1.45;
  --line-height-relaxed: 1.5;

  --letter-spacing-tighter: -0.03em;
  --letter-spacing-tight:   -0.015em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.10em;
  --letter-spacing-widest:  0.22em;

  /* ---------------- Layout ---------------- */
  --max-width-content: 68ch;
  --max-width-wide:    1280px;
  --max-width-page:    1480px;

  --border-radius-sm:   4px;
  --border-radius-md:   10px;
  --border-radius-lg:   20px;
  --border-radius-full: 999px;

  /* ---------------- Motion (Horological curves) ---------------- */
  --duration-instant: 75ms;
  --duration-fast:    180ms;
  --duration-normal:  320ms;
  --duration-slow:    550ms;
  --duration-slower:  850ms;

  --easing-default: cubic-bezier(0.16, 1, 0.3, 1);
  --easing-in:      cubic-bezier(0.4, 0, 1, 1);
  --easing-out:     cubic-bezier(0, 0, 0.2, 1);
  --easing-luxury:  cubic-bezier(0.22, 1, 0.36, 1);

  /* ---------------- Breakpoints ---------------- */
  --breakpoint-sm:  375px;
  --breakpoint-md:  768px;
  --breakpoint-lg:  1024px;
  --breakpoint-xl:  1280px;
  --breakpoint-2xl: 1536px;
}

/* ---------------- Color: Dark mode (Deep Obsidian Atelier) ---------------- */
[data-theme="dark"] {
  --color-bg-primary:        #0C0B09;
  --color-bg-secondary:      #141310;
  --color-bg-tertiary:       #1D1B15;
  --color-bg-inverse:        #F6F3EC;

  --color-text-primary:      #F6F3EC;
  --color-text-secondary:    #B8B1A0;
  --color-text-tertiary:     #787264;
  --color-text-inverse:      #141310;
  --color-text-inverse-muted: rgba(20, 19, 16, 0.65);
  --color-text-link:         #E5A93C;

  --color-border-primary:    #29251D;
  --color-border-secondary:  #1D1B15;
  --color-border-focus:      #E5A93C;
  --color-border-inverse:    rgba(20, 19, 16, 0.14);

  --color-accent-primary:        #E5A93C;
  --color-accent-primary-hover:  #F0BC5C;
  --color-accent-primary-active: #D49B2A;
  --color-accent-secondary:      #E84E38;
  --color-accent-secondary-hover:#F26B57;

  --color-status-success: #4CBE7C;
  --color-status-warning: #E5A93C;
  --color-status-error:   #E84E38;
  --color-status-info:    #5B9DE8;

  --color-surface-overlay: rgba(0, 0, 0, 0.82);

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.75);
  --shadow-focus: 0 0 0 3px rgba(229, 169, 60, 0.45);
  --shadow-glow: 0 0 45px rgba(229, 169, 60, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-primary:        #0C0B09;
    --color-bg-secondary:      #141310;
    --color-bg-tertiary:       #1D1B15;
    --color-bg-inverse:        #F6F3EC;

    --color-text-primary:      #F6F3EC;
    --color-text-secondary:    #B8B1A0;
    --color-text-tertiary:     #787264;
    --color-text-inverse:      #141310;
    --color-text-inverse-muted: rgba(20, 19, 16, 0.65);
    --color-text-link:         #E5A93C;

    --color-border-primary:    #29251D;
    --color-border-secondary:  #1D1B15;
    --color-border-focus:      #E5A93C;
    --color-border-inverse:    rgba(20, 19, 16, 0.14);

    --color-accent-primary:        #E5A93C;
    --color-accent-primary-hover:  #F0BC5C;
    --color-accent-primary-active: #D49B2A;
    --color-accent-secondary:      #E84E38;
    --color-accent-secondary-hover:#F26B57;

    --color-status-success: #4CBE7C;
    --color-status-warning: #E5A93C;
    --color-status-error:   #E84E38;
    --color-status-info:    #5B9DE8;

    --color-surface-overlay: rgba(0, 0, 0, 0.82);

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.75);
    --shadow-focus: 0 0 0 3px rgba(229, 169, 60, 0.45);
    --shadow-glow: 0 0 45px rgba(229, 169, 60, 0.35);
  }
}