/* ============================================================
   Tassel — Color tokens
   Values are canonical, taken from the product code
   (tassel-hub-frontend variables.scss / globals.scss) and the
   Tassel Brand Guide (Dec 2024). Do not round.
   ============================================================ */

:root {
  /* ---- Product Colors (the workhorse neutral ramp) ----
     The product's "primary" is a near-black dark grey, NOT orange.
     Buttons, headings and clickable elements default to product-900. */
  --product-900: #202020; /* primary / dark grey */
  --product-800: #4d4d4d;
  --product-700: #6e6e6e;
  --product-500: #757575;
  --product-400: #b1b1b1;
  --product-300: #d2d2d2;
  --product-200: #e9e9e9;
  --product-100: #f4f4f4;
  --product-50:  #fafafa;

  /* ---- Tassel Brand Colors (marketing accents) ----
     Exuberant Orange is the signature brand color. Blue + pink/red round
     out the brand palette. Each has a 900 / 500 / 200 tint. */
  --tassel-orange-900: #ff592b; /* Exuberant Orange — the brand signature */
  --tassel-orange-500: #ffbdaa;
  --tassel-orange-200: #ffded5;

  --tassel-blue-900: #09e6ed;
  --tassel-blue-500: #8af0f4;
  --tassel-blue-200: #d0eeef; /* Light Blue (brand guide) */

  --tassel-red-900: #fe4575;
  --tassel-red-500: #fd9bb4;
  --tassel-red-200: #fcd9e2; /* Light Pink (brand guide) */

  /* ---- Neutrals ---- */
  --white:             #ffffff;
  --white-transparent: rgba(255, 255, 255, 0.2);
  --black:             #121314; /* neutral black */
  --background:        #f6f3ef; /* White Chalk — the app canvas */
  --dark-grey:         #202020;

  /* ---- Auxiliary / accent colors ---- */
  --dark-red:   #ca312e;
  --red:        #fd3d39;
  --light-red:  #ffeceb;

  --dark-green: #42ad55;
  --green:      #53d86a;
  --light-green:#eefbf0;

  --dark-yellow:#cca226;
  --yellow:     #ffcb2f;
  --light-yellow:#fffaea;

  --dark-blue:  #3089af;
  --blue:       #3cabdb;
  --link-blue:  #004ad0; /* link color */
  --light-blue: #ecf7fb;

  /* ---- Status / feedback ---- */
  --disabled-color: #e9ebec;
  --active-color:   #f1f1f1;

  --status-error-10:   #feeaea;
  --status-error-20:   #fdd6d6;
  --status-error-60:   #f63030;
  --status-success-10: #e7fef8;
  --status-success-20: #baefe1;
  --status-success-60: #08b585;
  --status-warning-10: #fef8eb;
  --status-warning-20: #fce9c3;
  --status-warning-60: #f5b537;
  --status-info-10:    #f3eff6;
  --status-info-60:    #875baa;

  /* ---- Secondary greys ---- */
  --secondary-100: #9c9c9c;
  --secondary-200: #959595;
  --strokes-light: #e9e9e9;
  --strokes-dark:  #d9d9d9;

  /* ============================================================
     Semantic aliases — prefer these in components.
     ============================================================ */

  /* Surfaces */
  --surface-canvas:   var(--background);   /* app background (White Chalk) */
  --surface-card:     var(--white);
  --surface-sunken:   var(--product-50);
  --surface-raised:   var(--white);
  --surface-inverse:  var(--product-900);
  --surface-disabled: var(--disabled-color);

  /* Text */
  --text-strong:   #202020; /* headings, primary copy */
  --text-default:  #262626; /* body */
  --text-medium:   #4d4d4d;
  --text-muted:    #757575; /* secondary / placeholder */
  --text-disabled: #929292;
  --text-inverse:  #ffffff;
  --text-link:     var(--link-blue);
  --text-success:  #08b585;
  --text-warning:  #f5b537;
  --text-error:    #fd3d39;

  /* Borders */
  --border-default: var(--strokes-light);
  --border-strong:  var(--strokes-dark);
  --border-focus:   var(--product-900);

  /* Interactive (buttons / clickable) */
  --action-default:  var(--product-900);
  --action-hover:    #353535;
  --action-pressed:  #000000;
  --action-disabled: var(--product-400);
  --action-danger:   var(--status-error-60);

  /* Brand accent (use sparingly — CTAs, highlights, marketing) */
  --accent:        var(--tassel-orange-900);
  --accent-soft:   var(--tassel-orange-200);
}