/* =========================================================================
   Pocket Company — Color Tokens
   Sampled from the live products (Pocket CRM · Pocket Biz), not invented.

   Brand hue is INDIGO (#4C5EF0), not royal blue: it appears as the sidebar
   active state, icon tiles, primary pills and the logo mark.
   Product surfaces are FLAT and light — #F5F6FA page over #FFFFFF cards.
   Token names are stable; only values are tuned. Reference the SEMANTIC
   ALIASES in components, never the raw scales.
   ========================================================================= */

:root {
  /* ---- Brand indigo -------------------------------------------------
     600 is the product primary (pills, active nav, icon tiles).
     800 is the logo mark's deep fold. 500 is the lighter fill used on
     CRM date bars. */
  --pocket-blue-50:  #F2F4FE;
  --pocket-blue-100: #E4E9FD;
  --pocket-blue-200: #D0DAFC;
  --pocket-blue-300: #B3BFFA;
  --pocket-blue-400: #8792F5;
  --pocket-blue-500: #6581F6;
  --pocket-blue-600: #4C5EF0;  /* PRIMARY — core brand indigo */
  --pocket-blue-700: #3F4BE0;  /* hover */
  --pocket-blue-800: #363EC8;  /* logo deep fold / active */
  --pocket-blue-900: #2D34A3;
  --pocket-blue-950: #21276F;

  /* Muted indigo — CRM sidebar section labels on tinted bands */
  --indigo-muted: #4659AB;

  /* ---- Neutrals (cool gray, tuned to the real product chrome) ------- */
  --slate-25:  #FAFBFD;
  --slate-50:  #F5F6FA;  /* page background — both products */
  --slate-100: #EFF1F6;
  --slate-150: #ECECEC;  /* neutral chip / tag fill */
  --slate-200: #E2E6EE;
  --slate-250: #DCE1EA;  /* table header row */
  --slate-300: #C9CFDA;
  --slate-400: #A2A9B7;
  --slate-500: #6E7787;
  --slate-600: #515A6B;
  --slate-700: #3A4252;
  --slate-800: #262C39;
  --slate-900: #171B24;
  --slate-950: #12151C;  /* INK — primary text */
  --white: #FFFFFF;

  /* ---- Semantic status ----------------------------------------------
     Amber = 준비중 (in-progress). Coral red = D-day urgency. */
  --green-50:  #EAF8F1;
  --green-500: #2BB673;
  --green-600: #1E9D5F;
  --green-700: #16794A;

  --amber-50:  #FDFBE9;  /* 준비중 pill fill */
  --amber-500: #E1B940;  /* 준비중 pill border */
  --amber-600: #B4881B;  /* 준비중 pill text */
  --amber-700: #8A660F;

  --red-50:  #FCF4F4;  /* D-day rail tint */
  --red-300: #E2736D;  /* D-day label */
  --red-500: #E0524D;
  --red-600: #D13F3A;
  --red-700: #A82F2B;

  /* Data-viz accents — indigo-forward, restrained */
  --viz-1: var(--pocket-blue-600);
  --viz-2: var(--pocket-blue-400);
  --viz-3: var(--pocket-blue-800);
  --viz-4: #22B3C4;
  --viz-5: var(--slate-400);
  --viz-6: var(--amber-500);

  /* =====================================================================
     SEMANTIC ALIASES
     ===================================================================== */

  /* Surfaces */
  --color-bg:             var(--white);
  --color-bg-subtle:      var(--slate-50);
  --color-bg-muted:       var(--slate-100);
  --surface-card:         var(--white);
  --surface-raised:       var(--white);
  --surface-sunken:       var(--slate-50);
  --surface-inverse:      var(--slate-950);
  --surface-brand:        var(--pocket-blue-600);
  --surface-brand-subtle: var(--pocket-blue-50);
  --surface-field:        #F9F9F9;         /* search / memo inputs */
  --surface-table-head:   var(--slate-250);
  --surface-chip:         var(--slate-150); /* neutral tag & count chips */
  --surface-band:         #E9F0FD;          /* CRM sidebar section band */
  --surface-strong:       #000000;          /* black pills (전체 237) */

  /* Text */
  --text-primary:    var(--slate-950);
  --text-secondary:  var(--slate-600);
  --text-tertiary:   var(--slate-400);
  --text-disabled:   var(--slate-300);
  --text-link:       var(--pocket-blue-600);
  --text-on-brand:   var(--white);
  --text-on-inverse: var(--slate-50);
  --text-band:       var(--indigo-muted);

  /* Borders */
  --border-subtle:  var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong:  var(--slate-400);
  --border-brand:   var(--pocket-blue-200);
  --divider:        var(--slate-200);

  /* Brand interaction */
  --brand-primary:        var(--pocket-blue-600);
  --brand-primary-hover:  var(--pocket-blue-700);
  --brand-primary-active: var(--pocket-blue-800);
  --brand-surface:        var(--pocket-blue-50);
  --brand-surface-hover:  var(--pocket-blue-100);
  --brand-on-surface:     var(--pocket-blue-700);

  /* Status */
  --success:         var(--green-600);
  --success-surface: var(--green-50);
  --success-border:  #B6E5CD;
  --warning:         var(--amber-600);
  --warning-surface: var(--amber-50);
  --warning-border:  var(--amber-500);
  --danger:          var(--red-600);
  --danger-muted:    var(--red-300);
  --danger-surface:  var(--red-50);
  --danger-border:   #F3C9C7;
  --info:            var(--pocket-blue-600);
  --info-surface:    var(--pocket-blue-50);

  /* Focus ring */
  --focus-ring:       0 0 0 4px rgba(76, 94, 240, 0.18); /* @kind shadow */
  --focus-ring-color: rgba(76, 94, 240, 0.55); /* @kind color */

  /* ---- Gradients — MARKETING ONLY ----------------------------------
     Product UI is flat: use --brand-primary, never these. Reserved for
     slides, hero units and the logo mark. */
  --gradient-brand:      linear-gradient(118deg, #363EC8 0%, #4C5EF0 52%, #6581F6 100%); /* @kind other */
  --gradient-brand-soft: linear-gradient(118deg, #4C5EF0 0%, #6581F6 100%); /* @kind other */
  --gradient-ink:        linear-gradient(160deg, #1B2030 0%, #12151C 100%); /* @kind other */
  --gradient-mesh:       radial-gradient(900px 420px at 12% -10%, rgba(76,94,240,0.14), transparent 60%),
                         radial-gradient(700px 380px at 96% 8%, rgba(54,62,200,0.10), transparent 62%); /* @kind other */
}