/* ==========================================================================
   VIFYO INVITE DESIGN SYSTEM — TOKENS
   Üç katmanlı token mimarisi:
     1. Primitive  → ham değerler (renk, boşluk, yazı boyutu)
     2. Semantic   → amaca göre takma adlar (tema değişimi bu katmanda olur)
     3. Component  → bileşene özel token'lar
   Kural: Bileşen CSS'inde asla ham hex kullanılmaz; her zaman var() ile
   semantic ya da component token'a başvurulur.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PRIMITIVE TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Sıcak nötrler (taş/fildişi skalası) */
  --color-stone-0: #FFFFFF;
  --color-stone-25: #FCFBFA;
  --color-stone-50: #FAF9F7;
  --color-stone-100: #F4F2EF;
  --color-stone-200: #E8E5E0;
  --color-stone-300: #D6D2CB;
  --color-stone-400: #A8A29A;
  --color-stone-500: #78716A;
  --color-stone-600: #57534D;
  --color-stone-700: #44403B;
  --color-stone-800: #292522;
  --color-stone-900: #1C1917;
  --color-stone-950: #12100E;

  /* Royal Antique Gold skalası */
  --color-gold-50: #FFF9EA;
  --color-gold-100: #FDF0C8;
  --color-gold-200: #F8DE98;
  --color-gold-300: #F2D27D;
  --color-gold-400: #E4BA5A;
  --color-gold-500: #D6A43F;
  --color-gold-600: #B9852F;
  --color-gold-700: #8F6122;
  --color-gold-800: #694618;
  --color-gold-900: #432D10;

  /* Durum renkleri */
  --color-green-100: #DCFCE7;
  --color-green-600: #16A34A;
  --color-green-700: #15803D;
  --color-red-100: #FEE2E2;
  --color-red-500: #EF4444;
  --color-red-600: #DC2626;
  --color-red-700: #B91C1C;
  --color-amber-100: #FEF3C7;
  --color-amber-600: #D97706;
  --color-amber-700: #B45309;
  --color-blue-100: #DBEAFE;
  --color-blue-600: #2563EB;
  --color-blue-700: #1D4ED8;

  /* Tipografi — aileler */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  /* Tipografi — boyut skalası (mobil öncelikli, 16px taban) */
  --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.375rem;  /* 38px */
  --text-5xl: 3rem;      /* 48px */
  --text-6xl: 3.75rem;   /* 60px */

  /* Tipografi — ağırlık ve satır yüksekliği */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* Boşluk skalası (4px taban) */
  --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 */

  /* Köşe yumuşatma */
  --radius-xs: 0.25rem;   /* 4px  */
  --radius-sm: 0.375rem;  /* 6px  */
  --radius-md: 0.625rem;  /* 10px */
  --radius-lg: 0.875rem;  /* 14px */
  --radius-xl: 1.25rem;   /* 20px */
  --radius-2xl: 1.75rem;  /* 28px */
  --radius-full: 9999px;

  /* Gölgeler (sıcak tonlu, katmanlı ve yumuşak) */
  --shadow-xs: 0 1px 2px rgb(28 25 23 / 0.05);
  --shadow-sm: 0 1px 2px rgb(28 25 23 / 0.05), 0 2px 8px rgb(28 25 23 / 0.05);
  --shadow-md: 0 2px 4px rgb(28 25 23 / 0.04), 0 6px 16px rgb(28 25 23 / 0.08);
  --shadow-lg: 0 4px 8px rgb(28 25 23 / 0.05), 0 12px 32px rgb(28 25 23 / 0.10);
  --shadow-xl: 0 8px 16px rgb(28 25 23 / 0.06), 0 24px 56px rgb(28 25 23 / 0.14);

  /* Hareket */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 450ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Katman düzeni */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-toast: 1100;

  /* Dokunma hedefi (erişilebilirlik) */
  --touch-target: 2.75rem; /* 44px */
}

/* --------------------------------------------------------------------------
   2. SEMANTIC TOKENS (açık tema — varsayılan)
   -------------------------------------------------------------------------- */
:root {
  /* Zeminler */
  --bg-page: var(--color-stone-50);
  --bg-surface: var(--color-stone-0);
  --bg-surface-raised: var(--color-stone-0);
  --bg-subtle: var(--color-stone-100);
  --bg-inset: var(--color-stone-100);
  --bg-backdrop: rgb(18 16 14 / 0.5);

  /* Metin */
  --text-primary: var(--color-stone-900);
  --text-secondary: var(--color-stone-600);
  --text-tertiary: var(--color-stone-500);
  --text-disabled: var(--color-stone-400);
  --text-inverse: var(--color-stone-50);
  --text-brand: var(--color-gold-700);
  --text-link: var(--color-gold-700);
  --text-link-hover: var(--color-gold-800);

  /* Vurgu (marka) */
  --accent: var(--color-gold-500);
  --accent-strong: var(--color-gold-600);
  --accent-subtle: var(--color-gold-100);
  --accent-muted: var(--color-gold-50);

  /* Birincil eylem (mürekkep rengi — premium siyah) */
  --action-primary: var(--color-stone-900);
  --action-primary-hover: var(--color-stone-800);
  --action-primary-active: var(--color-stone-950);
  --action-primary-fg: var(--color-stone-50);

  /* Kenarlıklar */
  --border-default: var(--color-stone-200);
  --border-strong: var(--color-stone-300);
  --border-subtle: var(--color-stone-100);
  --border-focus: var(--color-gold-500);

  /* Durumlar */
  --status-success: var(--color-green-700);
  --status-success-bg: var(--color-green-100);
  --status-danger: var(--color-red-600);
  --status-danger-strong: var(--color-red-700);
  --status-danger-bg: var(--color-red-100);
  --status-warning: var(--color-amber-700);
  --status-warning-bg: var(--color-amber-100);
  --status-info: var(--color-blue-700);
  --status-info-bg: var(--color-blue-100);

  /* Odak halkası */
  --ring-color: var(--color-gold-500);
  --ring-offset: var(--bg-page);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2b. SEMANTIC TOKENS (koyu tema)
   Not: Koyu tema altyapısı hazırdır; ürün genelinde açılması ilerideki
   sprint kararıdır. data-theme="dark" verilen kökte devreye girer.
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --bg-page: #141210;
  --bg-surface: #1C1917;
  --bg-surface-raised: #23201D;
  --bg-subtle: #262220;
  --bg-inset: #12100E;
  --bg-backdrop: rgb(0 0 0 / 0.6);

  --text-primary: #F5F2EE;
  --text-secondary: #B5AEA6;
  --text-tertiary: #8F8880;
  --text-disabled: #5C564F;
  --text-inverse: var(--color-stone-900);
  --text-brand: var(--color-gold-400);
  --text-link: var(--color-gold-400);
  --text-link-hover: var(--color-gold-300);

  --accent: var(--color-gold-400);
  --accent-strong: var(--color-gold-300);
  --accent-subtle: rgb(209 172 98 / 0.16);
  --accent-muted: rgb(209 172 98 / 0.08);

  --action-primary: var(--color-stone-50);
  --action-primary-hover: var(--color-stone-0);
  --action-primary-active: var(--color-stone-200);
  --action-primary-fg: var(--color-stone-900);

  --border-default: #35302C;
  --border-strong: #4A443F;
  --border-subtle: #262220;
  --border-focus: var(--color-gold-400);

  --status-success: #4ADE80;
  --status-success-bg: rgb(74 222 128 / 0.12);
  --status-danger: #F87171;
  --status-danger-strong: #FCA5A5;
  --status-danger-bg: rgb(248 113 113 / 0.12);
  --status-warning: #FBBF24;
  --status-warning-bg: rgb(251 191 36 / 0.12);
  --status-info: #60A5FA;
  --status-info-bg: rgb(96 165 250 / 0.12);

  --ring-color: var(--color-gold-400);
  --ring-offset: var(--bg-page);

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 8px rgb(0 0 0 / 0.3);
  --shadow-md: 0 2px 4px rgb(0 0 0 / 0.3), 0 6px 16px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.35), 0 12px 32px rgb(0 0 0 / 0.45);
  --shadow-xl: 0 8px 16px rgb(0 0 0 / 0.4), 0 24px 56px rgb(0 0 0 / 0.55);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   3. COMPONENT TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Button */
  --btn-height-sm: 2rem;        /* 32px */
  --btn-height-md: 2.5rem;      /* 40px */
  --btn-height-lg: 3rem;        /* 48px */
  --btn-padding-x-sm: var(--space-3);
  --btn-padding-x-md: var(--space-5);
  --btn-padding-x-lg: var(--space-6);
  --btn-radius: var(--radius-md);
  --btn-font-size: var(--text-sm);
  --btn-font-size-lg: var(--text-base);

  /* Input */
  --input-height: 2.75rem;      /* 44px — mobil dokunma hedefi */
  --input-padding-x: var(--space-4);
  --input-radius: var(--radius-md);
  --input-bg: var(--bg-surface);
  --input-border: var(--border-default);
  --input-border-hover: var(--border-strong);

  /* Card */
  --card-bg: var(--bg-surface);
  --card-border: var(--border-subtle);
  --card-radius: var(--radius-xl);
  --card-padding: var(--space-6);
  --card-shadow: var(--shadow-sm);

  /* Dropdown */
  --dropdown-bg: var(--bg-surface-raised);
  --dropdown-radius: var(--radius-lg);
  --dropdown-shadow: var(--shadow-lg);
  --dropdown-min-width: 12rem;

  /* Modal */
  --modal-bg: var(--bg-surface-raised);
  --modal-radius: var(--radius-2xl);
  --modal-shadow: var(--shadow-xl);
  --modal-max-width: 32rem;

  /* Toast */
  --toast-bg: var(--color-stone-900);
  --toast-fg: var(--color-stone-50);
  --toast-radius: var(--radius-lg);
  --toast-shadow: var(--shadow-lg);

  /* Badge */
  --badge-radius: var(--radius-full);
  --badge-font-size: var(--text-xs);

  /* Switch */
  --switch-width: 2.75rem;
  --switch-height: 1.625rem;
  --switch-thumb: 1.25rem;
  --switch-off-bg: var(--color-stone-300);
  --switch-on-bg: var(--color-stone-900);

  /* Checkbox */
  --checkbox-size: 1.25rem;
  --checkbox-radius: var(--radius-xs);

  /* Skeleton */
  --skeleton-base: var(--bg-subtle);
  --skeleton-highlight: rgb(255 255 255 / 0.6);

  /* Header / Footer */
  --header-height: 4rem;
  --header-bg: rgb(250 249 247 / 0.85);
  --footer-bg: var(--bg-surface);
}

[data-theme="dark"] {
  --toast-bg: var(--color-stone-100);
  --toast-fg: var(--color-stone-900);
  --switch-off-bg: #4A443F;
  --switch-on-bg: var(--color-gold-400);
  --skeleton-highlight: rgb(255 255 255 / 0.06);
  --header-bg: rgb(20 18 16 / 0.85);
}