/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  /* Brand */
  --color-primary:        #768dff;
  --color-primary-hover:  #6275d4;
  --color-primary-active: #5364b4;
  --color-primary-light:  #e6eaff;
  --color-primary-subtle: #f9faff;
  --color-primary-text:   #353f71;

  /* Neutral (warm) */
  --color-surface:        #ffffff;
  --color-surface-muted:  #f5f5f4;
  --color-border:         #d2cccf;
  --color-border-strong:  #a59d99;
  --color-text:           #282021;
  --color-text-secondary: #433b38;
  --color-text-muted:     #786d68;
  --color-text-placeholder: #786d68;

  /* Semantic */
  --color-success:        #00be4c;
  --color-success-bg:     #f3fff8;
  --color-success-border: #4fff95;
  --color-error:          #c53434;
  --color-error-bg:       #fef5f5;
  --color-error-border:   #fccfcf;
  --color-warning:        #f6a351;
  --color-warning-bg:     #fff5eb;
  --color-warning-border: #ffd4a8;

  /* Typography */
  --font-family: "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

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

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,.10);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.12);
  --shadow-input: 0 0 0 1.5px var(--color-border), 0 1px 2px rgba(0,0,0,.05);
  --shadow-input-focus: 0 0 0 1.5px var(--color-primary), 0 0 0 4px rgba(118,141,255,.2);
  --shadow-input-error: 0 0 0 1.5px var(--color-error), 0 0 0 4px rgba(197,52,52,.15);
}

body {
  font-family: var(--font-family);
  color: var(--color-text);
}

/* Input focus ring — grape brand color */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary) !important;
  box-shadow: var(--shadow-input-focus) !important;
}