/* =====================================================
   PLUTINOS TECHNOLOGIES — COLOR TOKENS
   Extracted from brand logo: gold + charcoal slate
   ===================================================== */

:root {
  /* ── Gold (Primary Brand) ── */
  --gold-50:  #FFFBEB;
  --gold-100: #FEF3C7;
  --gold-200: #FDE68A;
  --gold-300: #FCD34D;
  --gold-400: #FBBF24;
  --gold-500: #F0B429;   /* PRIMARY — logo gold */
  --gold-600: #D4960A;
  --gold-700: #B07D07;
  --gold-800: #8A6005;
  --gold-900: #5C3F02;

  /* ── Slate (Secondary Brand) ── */
  --slate-50:  #F7F8FA;
  --slate-100: #EDF1F5;
  --slate-200: #D5DCE6;
  --slate-300: #B0BDCC;
  --slate-400: #8897A8;
  --slate-500: #637183;
  --slate-600: #4A5568;   /* PRIMARY — logo charcoal */
  --slate-700: #374151;
  --slate-800: #2D3748;
  --slate-900: #1A202C;

  /* ── Neutrals ── */
  --white:     #FFFFFF;
  --off-white: #FAFAF7;
  --black:     #0F1117;

  /* ── Semantic — Surface ── */
  --surface-base:    var(--white);
  --surface-subtle:  var(--slate-50);
  --surface-muted:   var(--slate-100);
  --surface-inverse: var(--slate-800);
  --surface-brand:   var(--gold-500);
  --surface-dark:    var(--slate-900);

  /* ── Semantic — Text ── */
  --text-primary:    var(--slate-900);
  --text-secondary:  var(--slate-600);
  --text-tertiary:   var(--slate-400);
  --text-inverse:    var(--white);
  --text-brand:      var(--gold-600);
  --text-on-gold:    var(--slate-900);

  /* ── Semantic — Border ── */
  --border-subtle:   var(--slate-100);
  --border-default:  var(--slate-200);
  --border-strong:   var(--slate-400);
  --border-brand:    var(--gold-500);

  /* ── Semantic — Status ── */
  --color-success: #16A34A;
  --color-warning: var(--gold-500);
  --color-error:   #DC2626;
  --color-info:    #2563EB;

  --color-success-bg: #F0FDF4;
  --color-warning-bg: var(--gold-50);
  --color-error-bg:   #FEF2F2;
  --color-info-bg:    #EFF6FF;
}

/* =====================================================
   PLUTINOS TECHNOLOGIES — TYPOGRAPHY TOKENS
   Display: Playfair Display (serif, like wordmark)
   Body/UI: DM Sans (clean professional sans)
   Mono: JetBrains Mono
   ===================================================== */

/* Google Fonts import */
/* Fonts loaded via <link> in index.html */
0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300;1,9..40,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Font Families ── */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ── Font Sizes (fluid scale) ── */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.875rem;   /* 30px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  3.75rem;    /* 60px */
  --text-6xl:  4.5rem;     /* 72px */

  /* ── Font Weights ── */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  /* ── Line Heights ── */
  --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-tight:  -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* ── Semantic Type Roles ── */
  --type-display:      var(--font-display);
  --type-heading:      var(--font-display);
  --type-subheading:   var(--font-body);
  --type-body:         var(--font-body);
  --type-label:        var(--font-body);
  --type-caption:      var(--font-body);
  --type-code:         var(--font-mono);
}

/* =====================================================
   PLUTINOS TECHNOLOGIES — SPACING TOKENS
   4px base grid
   ===================================================== */

:root {
  /* ── Base Scale ── */
  --space-0:    0px;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:  128px;
  --space-40:  160px;
  --space-48:  192px;
  --space-64:  256px;

  /* ── Semantic Spacing ── */
  --gap-xs:   var(--space-1);   /* 4px  — between icon+label */
  --gap-sm:   var(--space-2);   /* 8px  — tight groups */
  --gap-md:   var(--space-4);   /* 16px — default gap */
  --gap-lg:   var(--space-6);   /* 24px — card padding */
  --gap-xl:   var(--space-10);  /* 40px — section gaps */
  --gap-2xl:  var(--space-16);  /* 64px — large section gaps */
  --gap-3xl:  var(--space-24);  /* 96px — page-level gaps */

  /* ── Component Padding ── */
  --pad-btn-sm:    var(--space-2) var(--space-4);
  --pad-btn-md:    var(--space-3) var(--space-6);
  --pad-btn-lg:    var(--space-4) var(--space-8);
  --pad-input:     var(--space-3) var(--space-4);
  --pad-card:      var(--space-6);
  --pad-card-lg:   var(--space-8);
  --pad-badge:     var(--space-1) var(--space-3);
  --pad-tag:       var(--space-1) var(--space-2);

  /* ── Layout ── */
  --max-width-sm:  640px;
  --max-width-md:  768px;
  --max-width-lg:  1024px;
  --max-width-xl:  1280px;
  --max-width-2xl: 1440px;

  --container-pad: var(--space-8);
}

/* =====================================================
   PLUTINOS TECHNOLOGIES — SHADOW TOKENS
   Slate-tinted shadows for depth; gold glow for focus
   ===================================================== */

:root {
  /* ── Elevation shadows (slate-tinted) ── */
  --shadow-none: none;
  --shadow-xs:   0 1px 2px 0 rgba(26, 32, 44, 0.06);
  --shadow-sm:   0 1px 3px 0 rgba(26, 32, 44, 0.10), 0 1px 2px -1px rgba(26, 32, 44, 0.06);
  --shadow-md:   0 4px 6px -1px rgba(26, 32, 44, 0.10), 0 2px 4px -2px rgba(26, 32, 44, 0.06);
  --shadow-lg:   0 10px 15px -3px rgba(26, 32, 44, 0.10), 0 4px 6px -4px rgba(26, 32, 44, 0.06);
  --shadow-xl:   0 20px 25px -5px rgba(26, 32, 44, 0.12), 0 8px 10px -6px rgba(26, 32, 44, 0.06);
  --shadow-2xl:  0 25px 50px -12px rgba(26, 32, 44, 0.20);

  /* ── Brand glow (gold accent) ── */
  --shadow-gold-sm: 0 0 0 3px rgba(240, 180, 41, 0.25);
  --shadow-gold-md: 0 0 0 4px rgba(240, 180, 41, 0.35);
  --shadow-gold-lg: 0 8px 20px -4px rgba(240, 180, 41, 0.40);

  /* ── Focus ring ── */
  --shadow-focus: 0 0 0 3px rgba(240, 180, 41, 0.45);

  /* ── Inner shadow ── */
  --shadow-inner: inset 0 2px 4px 0 rgba(26, 32, 44, 0.08);

  /* ── Card defaults ── */
  --card-shadow:       var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);
}

/* =====================================================
   PLUTINOS TECHNOLOGIES — BORDER & RADIUS TOKENS
   Moderate rounding; gold accent borders
   ===================================================== */

:root {
  /* ── Border widths ── */
  --border-0: 0px;
  --border-1: 1px;
  --border-2: 2px;
  --border-4: 4px;

  /* ── Border radius ── */
  --radius-none:  0px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-full:  9999px;

  /* ── Component radii ── */
  --radius-btn:     var(--radius-md);
  --radius-input:   var(--radius-md);
  --radius-card:    var(--radius-lg);
  --radius-badge:   var(--radius-full);
  --radius-tag:     var(--radius-sm);
  --radius-avatar:  var(--radius-full);
  --radius-modal:   var(--radius-xl);
  --radius-chip:    var(--radius-full);

  /* ── Border shorthands ── */
  --border-subtle:  1px solid var(--slate-100);
  --border-default: 1px solid var(--slate-200);
  --border-strong:  1px solid var(--slate-400);
  --border-brand:   2px solid var(--gold-500);
  --border-focus:   2px solid var(--gold-500);
}

/* =====================================================
   PLUTINOS TECHNOLOGIES — MOTION TOKENS
   Smooth, professional easing; subtle transitions
   ===================================================== */

:root {
  /* ── Durations ── */
  --duration-instant: 0ms; /* @kind other */
  --duration-fast:    100ms; /* @kind other */
  --duration-normal:  200ms; /* @kind other */
  --duration-slow:    300ms; /* @kind other */
  --duration-slower:  500ms; /* @kind other */

  /* ── Easing curves ── */
  --ease-linear:     linear; /* @kind other */
  --ease-in:         cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --ease-out:        cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --ease-smooth:     cubic-bezier(0.25, 0.46, 0.45, 0.94); /* @kind other */

  /* ── Semantic transitions ── */
  --transition-colors:    color var(--duration-normal) var(--ease-in-out),
                          background-color var(--duration-normal) var(--ease-in-out),
                          border-color var(--duration-normal) var(--ease-in-out); /* @kind other */
  --transition-shadow:    box-shadow var(--duration-normal) var(--ease-out); /* @kind other */
  --transition-transform: transform var(--duration-normal) var(--ease-out); /* @kind other */
  --transition-opacity:   opacity var(--duration-normal) var(--ease-in-out); /* @kind other */
  --transition-all:       all var(--duration-normal) var(--ease-in-out); /* @kind other */

  /* ── Interactive element transitions ── */
  --transition-btn:  var(--transition-colors), var(--transition-shadow), var(--transition-transform); /* @kind other */
  --transition-card: var(--transition-shadow), var(--transition-transform); /* @kind other */
}