/* ============================================================
   ELEGANT MINIMALIST UI KIT — Design Tokens
   tokens.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root {

  /* ──────────────────────────────────────────────────────────
     COLOR: NEUTRAL SCALE
     Base: cool gray dengan sentuhan warm — cocok untuk
     background, text, dan border minimal.
  ────────────────────────────────────────────────────────── */
  --color-neutral-50:  #fafaf9;
  --color-neutral-100: #f5f5f4;
  --color-neutral-200: #e7e5e4;
  --color-neutral-300: #d6d3d1;
  --color-neutral-400: #a8a29e;
  --color-neutral-500: #78716c;
  --color-neutral-600: #57534e;
  --color-neutral-700: #44403c;
  --color-neutral-800: #292524;
  --color-neutral-900: #1c1917;
  --color-neutral-950: #0c0a09;

  /* ──────────────────────────────────────────────────────────
     COLOR: ACCENT — Warm Gold (Champagne)
     Dipilih karena: timeless, sophisticated, dan menonjol
     secara subtle di atas neutral. Cocok untuk CTA, highlight,
     dan elemen dekoratif minimalis.
  ────────────────────────────────────────────────────────── */
  --color-accent-50:  #fdf8ef;
  --color-accent-100: #faefd9;
  --color-accent-200: #f4dbb0;
  --color-accent-300: #eac07c;
  --color-accent-400: #dfa04a;
  --color-accent-500: #d4872e;   /* — primary accent — */
  --color-accent-600: #bb6b21;
  --color-accent-700: #9a531e;
  --color-accent-800: #7c421f;
  --color-accent-900: #65371c;
  --color-accent-950: #381b0c;

  /* ──────────────────────────────────────────────────────────
     COLOR: SEMANTIC
     Minimal — hanya 3 shade per semantic (light/default/dark)
     agar tidak berlebihan.
  ────────────────────────────────────────────────────────── */

  /* Success */
  --color-success-light:   #f0fdf4;
  --color-success:         #16a34a;
  --color-success-dark:    #14532d;
  --color-success-border:  #bbf7d0;

  /* Warning */
  --color-warning-light:   #fffbeb;
  --color-warning:         #b45309;
  --color-warning-dark:    #78350f;
  --color-warning-border:  #fde68a;

  /* Error */
  --color-error-light:     #fef2f2;
  --color-error:           #dc2626;
  --color-error-dark:      #7f1d1d;
  --color-error-border:    #fecaca;

  /* Info */
  --color-info-light:      #f0f9ff;
  --color-info:            #0284c7;
  --color-info-dark:       #0c4a6e;
  --color-info-border:     #bae6fd;

  /* ──────────────────────────────────────────────────────────
     TYPOGRAPHY
     Pairing: Playfair Display (serif) + Inter (sans-serif)
     — Klasik bertemu modern. Playfair memberi kesan mewah
       pada heading; Inter memastikan keterbacaan di body.
  ────────────────────────────────────────────────────────── */
  --font-serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:   'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font Scale */
  --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.25rem;    /*  36px */
  --text-5xl:  3rem;       /*  48px */

  /* Line Height */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.1em;

  /* Font Weight */
  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* ──────────────────────────────────────────────────────────
     SPACING — Base 4px
     Setiap unit = 4px. Scale mengikuti pola Tailwind default
     sehingga class seperti p-4 = 16px (4 × 4px).
  ────────────────────────────────────────────────────────── */
  --space-px:  1px;
  --space-0:   0px;
  --space-0-5: 2px;    /* 0.5 × 4 */
  --space-0-25: 1px;   /* 0.25 × 4 — hairline */
  --space-0-75: 3px;   /* 0.75 × 4 — fine detail */
  --space-1:   4px;
  --space-1-5: 6px;
  --space-2:   8px;
  --space-2-5: 10px;
  --space-3:   12px;
  --space-3-5: 14px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-9:   36px;
  --space-10:  40px;
  --space-11:  44px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-28:  112px;
  --space-32:  128px;

  /* ──────────────────────────────────────────────────────────
     BORDER RADIUS — Minimal
     Hanya dua level: sm (4px) dan md (8px).
     Filosofi: sudut tajam memberi kesan tegas dan refined.
  ────────────────────────────────────────────────────────── */
  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-md:   8px;

  /* ──────────────────────────────────────────────────────────
     SHADOW — 2 Level, Subtle
     Tidak dramatis. Hanya memberi kedalaman yang halus.
     sm: untuk card dan input hover.
     md: untuk dropdown dan modal.
  ────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04),
               0 1px 3px 0 rgb(0 0 0 / 0.03);

  --shadow-md: 0 2px 8px -1px rgb(0 0 0 / 0.07),
               0 4px 6px -2px rgb(0 0 0 / 0.04);

  /* ──────────────────────────────────────────────────────────
     TRANSITION — Smooth & Fast
     Fast: interaksi micro (hover, focus).
     Normal: perpindahan state (expand, collapse).
  ────────────────────────────────────────────────────────── */
  --duration-fast:   150ms;
  --duration-normal: 200ms;
  --duration-slow:   300ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --transition-colors:   color var(--duration-fast) var(--ease-in-out),
                         background-color var(--duration-fast) var(--ease-in-out),
                         border-color var(--duration-fast) var(--ease-in-out);

  --transition-shadow:   box-shadow var(--duration-normal) var(--ease-out);

  --transition-all:      all var(--duration-normal) var(--ease-in-out);

  /* ──────────────────────────────────────────────────────────
     BORDER
  ────────────────────────────────────────────────────────── */
  --border-width:   1px;
  --border-width-2: 2px;
  --border-color:   var(--color-neutral-200);
  --border-color-strong: var(--color-neutral-300);

  /* ──────────────────────────────────────────────────────────
     FOCUS RING
  ────────────────────────────────────────────────────────── */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-accent-500);

  /* ──────────────────────────────────────────────────────────
     PILL RADIUS (for fully rounded elements: badges, avatars)
  ────────────────────────────────────────────────────────── */
  --radius-pill: 9999px;

  /* ──────────────────────────────────────────────────────────
     TRANSFORM — Active/pressed states
  ────────────────────────────────────────────────────────── */
  --scale-active: 0.97;

  /* ──────────────────────────────────────────────────────────
     AVATAR — Status indicator sizes
  ────────────────────────────────────────────────────────── */
  --avatar-status-xs-size: 8px;
  --avatar-status-xs-dot:  4px;
  --avatar-status-xs-border: var(--border-width);

  --avatar-status-sm-size: 10px;
  --avatar-status-sm-dot:  5px;
  --avatar-status-sm-border: 1.5px;

  --avatar-status-md-size: 12px;
  --avatar-status-md-dot:  6px;
  --avatar-status-md-border: var(--border-width-2);

  --avatar-status-lg-size: 16px;
  --avatar-status-lg-dot:  8px;
  --avatar-status-lg-border: var(--border-width-2);

  --avatar-status-xl-size: 20px;
  --avatar-status-xl-dot:  10px;
  --avatar-status-xl-border: 2.5px;

  /* ──────────────────────────────────────────────────────────
     AVATAR GROUP — Overlap spacing
  ────────────────────────────────────────────────────────── */
  --avatar-group-sm-overlap: -6px;
  --avatar-group-md-overlap: -8px;
  --avatar-group-lg-overlap: -12px;

  /* ──────────────────────────────────────────────────────────
     AVATAR — Group border and hover
  ────────────────────────────────────────────────────────── */
  --avatar-group-border: var(--color-neutral-50);
  --avatar-group-hover-lift: -2px;

  /* ──────────────────────────────────────────────────────────
     AVATAR — Tooltip
  ────────────────────────────────────────────────────────── */
  --avatar-tooltip-offset-y: 4px;

  /* ──────────────────────────────────────────────────────────
     COMPONENT SIZES — Button
  ────────────────────────────────────────────────────────── */
  --btn-sm-height:   var(--space-8);   /* 32px */
  --btn-md-height:   var(--space-10);  /* 40px */
  --btn-lg-height:   var(--space-12);  /* 48px */

  /* ──────────────────────────────────────────────────────────
     COMPONENT SIZES — Badge & Tag
  ────────────────────────────────────────────────────────── */
  --badge-sm-height: 20px;
  --badge-md-height: 24px;
  --tag-sm-height:   24px;
  --tag-md-height:   28px;

  /* ──────────────────────────────────────────────────────────
     COMPONENT SIZES — Input & Textarea
  ────────────────────────────────────────────────────────── */
  --input-sm-height:   var(--space-8);   /* 32px */
  --input-md-height:   var(--space-10);  /* 40px */
  --input-lg-height:   var(--space-12);  /* 48px */

  --textarea-min-rows: 3;
  --textarea-max-rows: 10;

  /* ──────────────────────────────────────────────────────────
     INPUT — Focus ring variant (overrides default accent)
  ────────────────────────────────────────────────────────── */
  --input-focus-color:      var(--color-accent-500);
  --input-focus-error:       var(--color-error);
  --input-focus-success:     var(--color-success);
  --input-focus-warning:     var(--color-warning);

  /* ──────────────────────────────────────────────────────────
     INPUT — Placeholder & icon color
  ────────────────────────────────────────────────────────── */
  --input-placeholder-color: var(--color-neutral-400);
  --input-icon-color:        var(--color-neutral-400);
  --input-addon-text-color:  var(--color-neutral-500);
  --input-addon-bg:          var(--color-neutral-100);
  --input-helper-color:      var(--color-neutral-500);
  --input-label-color:       var(--color-neutral-700);
  --input-text-color:        var(--color-neutral-800);
  --input-bg:                #ffffff;
  --input-filled-bg:         var(--color-neutral-50);
  --input-disabled-opacity:  0.5;
  --input-disabled-cursor:   not-allowed;
  --input-clear-size:        var(--space-4);

  /* ──────────────────────────────────────────────────────────
     COMPONENT SIZES — Select
  ────────────────────────────────────────────────────────── */
  --select-sm-height:   var(--space-8);   /* 32px */
  --select-md-height:   var(--space-10);  /* 40px */
  --select-lg-height:   var(--space-12);  /* 48px */
  --select-dropdown-max-height: 240px;
  --select-option-height: 36px;

  /* ──────────────────────────────────────────────────────────
     SELECT — Colors & shadows
  ────────────────────────────────────────────────────────── */
  --select-bg:             #ffffff;
  --select-dropdown-shadow: var(--shadow-md);
  --select-option-hover-bg: var(--color-neutral-50);
  --select-option-active-bg: var(--color-neutral-100);
  --select-group-label-color: var(--color-neutral-500);
  --select-search-border: var(--color-neutral-200);
  --select-counter-bg: var(--color-neutral-200);
  --select-counter-min-width: var(--space-6);
  --select-counter-height: var(--badge-sm-height);
  --select-search-min-width: var(--space-20);

  /* ──────────────────────────────────────────────────────────
     COMPONENT SIZES — Checkbox & Radio
  ────────────────────────────────────────────────────────── */
  --checkbox-sm: var(--space-3);    /* 12px */
  --checkbox-md: var(--space-4);    /* 16px */
  --checkbox-lg: var(--space-5);    /* 20px */

  /* ──────────────────────────────────────────────────────────
     CHECKBOX & RADIO — Colors
  ────────────────────────────────────────────────────────── */
  --control-bg:              var(--color-neutral-100);
  --control-border:          var(--color-neutral-300);
  --control-checked-bg:      var(--color-accent-500);
  --control-checked-border:  var(--color-accent-500);
  --control-disabled-opacity: 0.4;
  --control-gap:             var(--space-2);

  /* ──────────────────────────────────────────────────────────
     COMPONENT SIZES — Toggle / Switch
  ────────────────────────────────────────────────────────── */
  --switch-sm-track-w:       32px;
  --switch-sm-track-h:       18px;
  --switch-sm-thumb:         14px;
  --switch-sm-translate:     14px;

  --switch-md-track-w:       40px;
  --switch-md-track-h:       22px;
  --switch-md-thumb:         18px;
  --switch-md-translate:     18px;

  --switch-lg-track-w:       48px;
  --switch-lg-track-h:       26px;
  --switch-lg-thumb:         22px;
  --switch-lg-translate:     22px;

  /* ──────────────────────────────────────────────────────────
     TOGGLE / SWITCH — Colors
  ────────────────────────────────────────────────────────── */
  --switch-track-off:        var(--color-neutral-300);
  --switch-track-on:         var(--color-accent-500);
  --switch-thumb:            #ffffff;
  --switch-disabled-opacity: 0.5;
  --switch-thumb-shadow:     0 1px 2px 0 rgb(0 0 0 / 0.15);
  --switch-label-font-size:  9px;
  --switch-spinner-inset:    2px;

  /* ──────────────────────────────────────────────────────────
     TOAST / NOTIFICATION
  ────────────────────────────────────────────────────────── */
  --toast-max-width:       384px;
  --toast-min-width:       280px;
  --toast-font-size:       var(--text-sm);
  --toast-icon-size:       var(--space-5);
  --toast-shadow:          0 4px 12px -2px rgb(0 0 0 / 0.08),
                           0 2px 6px -1px rgb(0 0 0 / 0.06);
  --toast-border-radius:   var(--radius-md);
  --toast-bg:              #ffffff;
  --toast-progress-height: 3px;
  --toast-default-duration: 4000ms;
  --toast-slide-duration:  300ms;
  --toast-stack-gap:       var(--space-3);
  --toast-icon-margin:     var(--space-0-25);
  --toast-close-margin:    -2px;
  --toast-action-underline-offset: 2px;

  /* ──────────────────────────────────────────────────────────
     NOTIFICATION PANEL
  ────────────────────────────────────────────────────────── */
  --notif-panel-width:       384px;
  --notif-panel-max-height:  480px;
  --notif-avatar-size:       var(--space-10);

  /* ──────────────────────────────────────────────────────────
     MODAL / DIALOG
  ────────────────────────────────────────────────────────── */
  --modal-overlay-bg:      rgb(0 0 0 / 0.3);
  --modal-overlay-blur:    4px;
  --modal-bg:              #ffffff;
  --modal-shadow:          0 8px 24px -4px rgb(0 0 0 / 0.08),
                           0 20px 48px -8px rgb(0 0 0 / 0.06);
  --modal-radius:          var(--radius-md);
  --modal-sm:              400px;
  --modal-md:              560px;
  --modal-lg:              720px;
  --modal-xl:              900px;
  --modal-max-w:           calc(100vw - var(--space-8));
  --modal-max-h:           calc(100vh - var(--space-12));
  --modal-padding:         var(--space-6);
  --modal-header-padding:  var(--space-4) var(--space-6);
  --modal-footer-padding:  var(--space-4) var(--space-6);
  --modal-body-padding:    var(--space-6);
  --modal-open-duration:   250ms;
  --modal-open-ease:       cubic-bezier(0.16, 1, 0.3, 1);

  /* ──────────────────────────────────────────────────────────
     TOOLTIP / POPOVER
  ────────────────────────────────────────────────────────── */
  --tooltip-bg:              var(--color-neutral-900);
  --tooltip-color:           var(--color-neutral-50);
  --tooltip-font-size:       var(--text-xs);
  --tooltip-padding:         var(--space-1-5) var(--space-2-5);
  --tooltip-border-radius:   var(--radius-sm);
  --tooltip-arrow-size:      6px;
  --tooltip-shadow:          0 2px 4px 0 rgb(0 0 0 / 0.1);
  --tooltip-light-bg:        var(--color-neutral-50);
  --tooltip-light-color:     var(--color-neutral-800);
  --tooltip-light-border:    var(--color-neutral-200);
  --tooltip-in-duration:     150ms;
  --tooltip-out-duration:    80ms;
  --tooltip-show-delay:      300ms;
  --tooltip-hide-delay:      100ms;
  --tooltip-max-width:       240px;
  --tooltip-rich-max-width:  280px;

  --popover-bg:              #ffffff;
  --popover-color:           var(--color-neutral-800);
  --popover-min-width:       280px;
  --popover-max-width:       384px;
  --popover-border-radius:   var(--radius-md);
  --popover-shadow:          var(--shadow-md);
  --popover-border:          var(--color-neutral-200);

  /* ──────────────────────────────────────────────────────────
     ALERT / INLINE MESSAGE / PAGE BANNER
  ────────────────────────────────────────────────────────── */
  --alert-padding:           var(--space-4);
  --alert-padding-compact:   var(--space-2-5) var(--space-3);
  --alert-radius:            var(--radius-sm);
  --alert-border-accent:     3px;
  --alert-icon-size:         var(--space-5);
  --alert-font-size:         var(--text-sm);
  --alert-max-width:         720px;
  --alert-slide-duration:    var(--duration-normal);

  --alert-subtle-success-bg:   var(--color-success-light);
  --alert-subtle-success-accent: var(--color-success);
  --alert-subtle-error-bg:     var(--color-error-light);
  --alert-subtle-error-accent:   var(--color-error);
  --alert-subtle-warning-bg:   var(--color-warning-light);
  --alert-subtle-warning-accent: var(--color-warning);
  --alert-subtle-info-bg:      var(--color-info-light);
  --alert-subtle-info-accent:    var(--color-info);
  --alert-subtle-neutral-bg:   var(--color-neutral-100);
  --alert-subtle-neutral-accent: var(--color-neutral-400);

  --alert-filled-success-bg:   var(--color-success);
  --alert-filled-error-bg:     var(--color-error);
  --alert-filled-warning-bg:   var(--color-warning);
  --alert-filled-info-bg:      var(--color-info);
  --alert-filled-neutral-bg:   var(--color-neutral-700);

  --inline-msg-font-size:    var(--text-xs);
  --inline-msg-icon-size:    var(--space-3-5);

  --page-banner-padding:   var(--space-2-5) var(--space-4);
  --page-banner-font-size: var(--text-sm);
  --page-banner-bg:        var(--color-accent-500);
  --page-banner-color:     var(--color-neutral-50);
  --page-banner-text-max:  640px;
  --page-banner-max-h:     200px;
  --alert-max-h:           2000px;
  --alert-hover-underline: 2px;

  /* ──────────────────────────────────────────────────────────
     Z-INDEX SCALE
  ────────────────────────────────────────────────────────── */
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-overlay:   200;
  --z-tooltip:   250;
  --z-modal:     300;
  --z-toast:     400;

  /* ──────────────────────────────────────────────────────────
     ANIMATION — Spinner / loading
  ────────────────────────────────────────────────────────── */
  --anim-spin-duration:    0.8s;
  --anim-spinner-fast:     0.6s;
  --anim-check-draw-delay: 200ms;
}

/* ──────────────────────────────────────────────────────────────
   BASE RESET — Terapkan token sebagai default
────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-neutral-800);
  background-color: var(--color-neutral-50);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-neutral-900);
}