/* ==========================================================================
   Nippon × Sattva × mGrant — Design Tokens
   Single source of truth for all color, type, spacing, radius, shadow, motion.
   Path: sattva_nippon/public/css/design_tokens.css
   Rule: no hex value lives anywhere else in the codebase. Enforcement:
         scripts/validate_fixtures.py (+ pre-commit hook).
   Brand values sampled from the Nippon India Mutual Fund logo
   (images/nippon_logo.png) and the live mf.nipponindiaim.com/csr CSS.
   ========================================================================== */

:root {
  /* -- Nippon brand -------------------------------------------------------- */
  --nip-red:              #EA2128; /* Primary: buttons, links, eyebrow */
  --nip-red-hover:        #C41319; /* Hover, active sidebar text and icon */
  --nip-ink:              #231F20; /* Logo ink, hero base, headings */
  --nip-ink-lift:         #322B2C; /* Hero gradient lift */
  --nip-text:             #333333; /* Body text in product */
  --nip-tint:             #FCF4F4; /* Input tint, soft fills */
  --nip-gray-dark:        #54565B; /* Supporting gray */
  --nip-gray-light:       #A8A8AA; /* Supporting gray */

  /* -- Soft-tint system (sidebar pill, home tiles), derived from --nip-red -- */
  --side-tint:            #FEF6F6; /* 4% red on white: active and hover pill */
  --side-tint-strong:     #FDEDED; /* 9% red on white: tile hover */
  --side-edge:            #FDE6E7; /* 12% red on white: hairline on tinted surfaces */

  /* -- Login surface tokens (hex-free composition for login.css) ----------- */
  --field-bg:             #FCF4F4; /* Input fill, matches --nip-tint */
  --field-border:         #E4E6EA;
  --field-text:           #333333;
  --field-icon:           #8A8F98;
  --field-placeholder:    #B6B6B6;
  --divider-line:         #ECECEC;
  --auth-title:           #231F20;
  --auth-subtitle:        #55595F;
  --sso-hover-bg:         #FEF6F6;
  /* O365 SSO glyph quadrant colours (Microsoft brand, vendor-owned) */
  --o365-red:             #F25022;
  --o365-green:           #7FBA00;
  --o365-blue:            #00A4EF;
  --o365-yellow:          #FFB900;

  /* -- Login composite colours (rgba of --nip-ink 35,31,32 and --nip-red) -- */
  --hero-ov-top:          rgba(35,31,32,0.15);
  --hero-ov-upper:        rgba(35,31,32,0.10);
  --hero-ov-mid:          rgba(35,31,32,0.55);
  --hero-ov-foot:         rgba(35,31,32,0.92);
  --hero-grad:            linear-gradient(155deg, #231F20 0%, #322B2C 52%, #94111B 100%); /* ink to 70% hover red */
  --hero-glow:            rgba(234,33,40,0.55);
  --hero-progress-track:  rgba(255,255,255,0.22);
  --hero-progress-fill:   rgba(255,255,255,0.75);
  --hero-rule:            rgba(255,255,255,0.25);
  --focus-ring:           rgba(234,33,40,0.14);
  --autofill-fill:        #FCF4F4;

  /* -- Home focus-area placeholders (initials tiles), cycled by index ------ */
  --home-ph-1:            linear-gradient(135deg, #231F20, #EA2128);
  --home-ph-2:            linear-gradient(135deg, #54565B, #231F20);
  --home-ph-3:            linear-gradient(135deg, #C41319, #EA2128);
  --home-ph-4:            linear-gradient(135deg, #231F20, #54565B);
  --home-ph-5:            linear-gradient(135deg, #EA2128, #C41319);
  --home-ph-6:            linear-gradient(135deg, #A8A8AA, #54565B);
  --home-shadow-tile:     0 8px 22px rgba(0,0,0,0.10);
  --home-shadow-card:     0 6px 18px rgba(0,0,0,0.08);
  --home-shadow-panel:    0 8px 24px rgba(0,0,0,0.12);

  /* -- Grant report headers (overrides/report_palette.py reads these) ------ */
  --report-head-bg:       #C41319; /* Header fill: --nip-red-hover, AA with white text */
  --report-head-rule:     #94111B; /* Header cell rules: 70% hover red */
  --report-head-text:     #FFFFFF; /* Header text */
  --report-group-bg:      #FCF4F4; /* Milestone group cell: --nip-tint */

  /* -- Neutrals ------------------------------------------------------------- */
  --white:                #FFFFFF;
  --surface-0:            #FFFFFF;
  --surface-1:            #FAFAFA;
  --surface-2:            #F4F6F8;
  --border:               #E5E7EB;
  --border-strong:        #D1D5DB;

  --text-primary:         #231F20; /* Body text on light, Nippon ink */
  --text-secondary:       #4B5563;
  --text-muted:           #6B7280;
  --text-disabled:        #9CA3AF;
  --text-on-dark:         #FFFFFF;
  --text-on-dark-muted:   rgba(255,255,255,0.72);
  --text-on-dark-faint:   rgba(255,255,255,0.48);

  /* -- Semantic feedback — form validation, inline status messages --------- */
  --color-success:        #1F7A4E; /* Success green — reset-link sent, save OK */
  --color-danger:         #B42318; /* Danger red — form errors, network failures */
  --color-warning:        #B7791F; /* Pending and overdue hints */
  --color-warning-soft:   #F8F0DF; /* Pending pill fill */

  /* -- Typography ---------------------------------------------------------- */
  --font-sans:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display:         'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-xs:                12px;
  --fs-sm:                14px;
  --fs-base:              15px;
  --fs-md:                16px;
  --fs-lg:                18px;
  --fs-xl:                22px;
  --fs-2xl:               28px;
  --fs-3xl:               40px;
  --fs-4xl:               56px;
  --fs-hero:              72px;

  --fw-regular:           400;
  --fw-medium:            500;
  --fw-semibold:          600;
  --fw-bold:              700;

  --lh-tight:             1.15;
  --lh-snug:              1.35;
  --lh-normal:            1.55;

  --tracking-tight:       -0.02em;
  --tracking-wide:        0.08em;

  /* -- Spacing scale ------------------------------------------------------- */
  --space-0:              0;
  --space-1:              4px;
  --space-2:              8px;
  --space-3:              12px;
  --space-4:              16px;
  --space-5:              20px;
  --space-6:              24px;
  --space-8:              32px;
  --space-10:             40px;
  --space-12:             48px;
  --space-16:             64px;
  --space-20:             80px;
  --space-24:             96px;

  /* -- Radius -------------------------------------------------------------- */
  --radius-sm:            4px;
  --radius:               6px;
  --radius-md:            8px;
  --radius-lg:            12px;
  --radius-xl:            16px;
  --radius-pill:          999px;

  /* -- Shadow -------------------------------------------------------------- */
  --shadow-xs:            0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:            0 2px 4px rgba(0,0,0,0.06);
  --shadow:               0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:            0 16px 40px rgba(0,0,0,0.12);
  --shadow-focus:         0 0 0 3px rgba(234,33,40,0.20); /* --nip-red at 20% */

  /* -- Motion -------------------------------------------------------------- */
  --ease-out:             cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:          cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:             150ms;
  --dur-base:             220ms;
  --dur-slow:             400ms;

  /* -- Layout -------------------------------------------------------------- */
  --form-width:           420px;
  --form-padding-x:       56px;
}

/* ==========================================================================
   Reset + base (minimal — keeps tokens file lean; composition lives per-page)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
/* Brand link colour on website pages only. The desk body carries data-route,
   so desk links keep Frappe's own colours and nothing leaks into desk chrome. */
body:not([data-route]) a { color: var(--nip-red); text-decoration: none; }
body:not([data-route]) a:hover { color: var(--nip-red-hover); }